jQuery animation in sequence
I have a few div elements that i want to dynamically apply an effect to in sequence. These divs are loaded from an array so I cant manually construct the animation like this
$(segment).animate({
opacity:开发者_运维知识库 0
}, 100, function(){
$(segment).animate({
opacity: 1
}, 100);
});
Any idea how to solve this problem? Somebody else suggested i use the jQuery queue but that seems to just create a queue for each element.
I haven't used jquery queue that everyone mentioned so just used an array and a timer. Heres the fiddle : http://jsfiddle.net/5MyQU/1/
$(document).ready(function() {
var __THEDIVS = [];
$('div').each(function() {
__THEDIVS.push($(this));
})
function animate() {
$elem = __THEDIVS.pop();
$elem.animate({
'height': '100px'
}, 200);
if (__THEDIVS.length) {
setTimeout(animate, 500);
}
}
animate();
})
Some HTML
<div></div>
<div></div>
<div></div>
<div></div>
精彩评论