Using jQuery.queue with multiple element animations?

Question

jQuery queue\'s are very annoying - I can\'t get my head around it...

The following function contains 4 animations which I want to happen one after the other (not at

Answer 1

Try using jQuery promise API. You can pull the promise from each jQuery element and then attach a done callback to it.

For example,

$("#header").animate({"opacity":"1"},{duration:3000 }).promise().done(function () {
    $("#header").animate({ "top":"0px" },{ duration:3000 });
});

You can refer to jQuery's promise API for more information. http://api.jquery.com/promise/

Answer 2

You have a few options.

Delay it:

$("#loader").delay(6000).animate({"opacity":"0"},{duration:3000});
$("#background").delay(9000).animate({"background-position" : "300px center"},{duration:3000});

Use callbacks:

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000,function(){
        $("#loader").animate({"opacity":"0"},3000,function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}

or use deferred objects:

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().done(function(){
        $("#loader").animate({"opacity":"0"},3000).promise().done(function(){
            $("#background").animate({"background-position" : "300px center"},3000);
        });
    });   

}

Another deferred object option:

function startupAnime() {

    $("#header").animate({"opacity":"1"},3000);
    $("#header").animate({"top":"0px"},3000).promise().then(function(){
        return $("#loader").animate({"opacity":"0"},3000).promise();
    }).done(function(){
        $("#background").animate({"background-position" : "300px center"},3000);
    });

}  

I won't even post the custom queueing because that just gets ridiculous.

None of them are really very clean. Pick your poison. The .delay() looks the cleanest to me, but may be less maintainable. Though the alternatives aren't that maintainable either.

If i had to, I would use the 2nd deferred object sample because i don't feel comfortable with the delay and hate the pyramid of doom.

Answer 3

You have a lot of options, but here is what I would do (because I like the self-explanatory syntax):

$.when(
    $("#header").animate({opacity: 1}, 3000).promise(),
    $("#header").animate({top: 0}, 3000).promise()
).done(function() {
    $("#loader").animate({opacity: 0}, 3000).promise()
    .done(function() {
        $("#background").animate({"background-position" : "300px center"}, 3000)
    })
})

Demo: http://jsfiddle.net/vjazX/