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

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/