| Jquery Slide from right to left
|
andrewsmd
msg:4523093 | 2:41 am on Nov 28, 2012 (gmt 0) |
I have a JS function that fires every 5 seconds and rotates a div. I can get the divs to do a single function like fadin or slidedown but I cannot get them to slide in from right to left. Here is the line I've tried to put .animate on but I can't seem to get it. It works when i use this
$(container.children()[0]).slideDown("slow");
but when I try
$(container.children()[0]).animate({ "left": "400px" }, "slow");
I get nothing. here is my full code. JS file
/**
* @author ilkinulas@gmail.com
* jquery plugin that rotates div elements inside a given div element
*/
var hiddenDivs = [];
jQuery.fn.divroller = function(options) {
settings = jQuery.extend( {
visible : 1,
pause : 3000
}, options);
start(settings, this);
function start(settings, container) {
var divs = container.children();
//hide unvisible divs
while (settings.visible < divs.length) {
var removedDiv = $(divs[divs.length - 1]).remove();
hiddenDivs.push(removedDiv);
divs = container.children();
}
setTimeout( function() {
roll(settings, container)
}, settings.pause);
};
function roll(settings, container) {
//Dom manipulation.
container.prepend(hiddenDivs.pop());
hiddenDivs.unshift($(container.children()[settings.visible]).remove());
//Efect
$(container.children()[0]).hide();
$(container.children()[0]).animate({ "left": "400px" }, "slow");
//Repeat
setTimeout( function() {
roll(settings, container)
}, settings.pause);
}
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.divroller.js"></script>
<style type="text/css">
#divroller_container {
width:400px;
}
.box_dark {
background-color: green;
}
.box_light {
background-color: red;
}
.box_size {
padding:10px;
}
.external_link{
color: green;
font-size:20px;
}
</style>
</head>
<body>
<div id="divroller_container">
<div class="box_dark box_size" id="item1">
content 1
</div>
<div class="box_light box_size" id="item2">
content 2
</div>
<div class="box_dark box_size" id="item3">
content 3
</div>
<div class="box_light box_size" id="item4">
content 4
</div>
<div class="box_dark box_size" id="item5">
content 5
</div>
<div class="box_light box_size" id="item6">
content 6
</div>
<div class="box_light box_size" id="item7">
content 7
</div>
</div>
<script type="text/javascript">
$("#divroller_container").divroller({ pause: 3000, visible: 1 });
</script>
</body>
</html>
|
daveVk
msg:4523095 | 3:12 am on Nov 28, 2012 (gmt 0) |
You call hide() prior to animate() ?
Try without hide() or maybe replace with show().
|
andrewsmd
msg:4523188 | 1:47 pm on Nov 28, 2012 (gmt 0) |
If I remove hide, then the divs change, but they don't have any animation.
|
daveVk
msg:4523374 | 10:07 pm on Nov 28, 2012 (gmt 0) |
[api.jquery.com...]
| Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default. |
|
You may need to set style="position: relative;"
Also example at above link uses left: '+=50' in animate() ?
|
|
|
