使用带有多个元素动画的jQuery.queue？

Question

jQuery队列很烦人 - 我无法理解它...

以下函数包含4个动画,我希望一个接一个地发生(不是同时发生).

function startupAnime() {

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

$(window).load(function() { 

    startupAnime();
})

两个#header元素将一个接一个地动画,但其余的都在同一时间发生.

然后我发现Queue只有在你动画相同的元素时才有效!! 这不是很有用......但是添加队列:"名称"显然应该将它们链接到同一个队列中......虽然这只会阻止他们为我工作.

我在这里错过了什么吗？我不确定队列是否意味着"下一个动画将在当前一个动画完成后开始",或者"这些动画被保存在一个等待你释放它们的队列中"可能是通过调用队列("全局")或其他东西!

大多数建议都讨论动画一个元素,或设置许多函数,并使用回调来"迭代"函数 - 如果你问我,不是很干净.我只是希望能够在我要求时运行动画列表.

注意:动画的"列表"可以一次为一个元素设置动画,但我也可能希望两个或更多元素在列表中的某个点同时进行动画处理.这是一个示例:

animate element A
-> then ->
animate element B
-> then ->
animate element C and D together
-> then ->
animate element E

Answer 1

你有很多选择,但这就是我要做的事情(因为我喜欢不言自明的语法):

$.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)
    })
})

演示:http://jsfiddle.net/vjazX/