Chaining jQuery animations that affect different elements

Question

$(document).ready(function() {
    $(\"#div1\").fadeIn(\"slow\");
    $(\"#div2\").delay(500).fadeIn(\"slow\");
    $(\"#div3\").delay(2000).fadeIn(\"slow\");
    $(         


        

Answer 1

fadeIn takes a callback as its second parameter. That callback is executed as soon as the animation is complete. If you want the elements to fade in sequentially, you could chain the callbacks:

$(document).ready(function() {
    $("#div1").fadeIn("slow", function(){
        $("#div2").fadeIn("slow", function(){
            $("#div3").fadeIn("slow", function(){
                $("#div4").fadeIn("slow");
            });
        });
    });
});

This could be re-written using an array of selectors and a single method, if you felt like it:

var chain = function(toAnimate, ix){
    if(toAnimate[ix]){
        $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1 )});
    }
};

$(document).ready(function(){
    chain(['#div1', '#div2', '#div3', '#div4'], 0);
});

See this last one in action at JSBin.

Answer 2

I'd do it in a loop, as long as you're talking about a consistent increment (and as long as they appear in the same order on the page).

$("#div1,#div2,#div3,#div4").each(function( idx ) {
    $(this).delay( idx * 1000 ).fadeIn("slow");
});

Example: http://jsfiddle.net/km66t/

This uses the index passed by .each() to increment the delay.

So you're effectively doing:

$("#div1").delay( 0 ).fadeIn("slow");
$("#div2").delay( 1000 ).fadeIn("slow");
$("#div3").delay( 2000 ).fadeIn("slow");
$("#div4").delay( 3000 ).fadeIn("slow");

---

EDIT: To hopefully address the issue in the comment below, you could instead store an Array of the delays you want to use, and access the proper index of the Array using the index from .each().

var delays = [0, 1000, 2000, 4000];

$("#div1,#div2,#div3,#div4").each(function( idx ) {
    $(this).delay( delays[ idx ] ).fadeIn("slow");
});

Answer 3

This can be done elegantly since 1.8:

$("div").toArray().map(function(e){
    return function(){
        return $(e).fadeIn(600).promise()
    };
}).reduce(function( cur, next ){
    return cur.then(next);
}, $().promise());

http://jsfiddle.net/f3WzR/

Answer 4

Not happy with the provided answers, here is what i used:

    var $steps = $('#div1, #div2, #div3');
    // iterate throught all of them
    $.each($steps,function(index,value){
        $stage.fadeIn('slow', function(){
            // You can even do something after the an animation step is completed placing your code here.
            // run the function again using a little introspection provided by javascript
            arguments.callee
        });  
    })

This way you don't have to declare the delays.