Question

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.

Answer 1

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>