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/

Answer 2

您有几个选择。

延迟：

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

使用回调：

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);
        });
    });   

}

或使用延迟对象：

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);
        });
    });   

}

另一个延迟对象选项：

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);
    });

}

我甚至不会发布自定义排队，因为这太荒谬了。

他们都不是很干净。选择你的毒药。 .delay（）看起来对我来说最干净，但可能不太可维护。虽然替代方案也不可维护。

如果必须的话，我会使用第二个延期对象样本，因为我对延迟感到不舒服并且讨厌厄运的金字塔。

Answer 3

尝试使用jQuery promise API。您可以从每个jQuery元素中提取promise，然后将完成的回调附加到它。

例如，

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

您可以参考jQuery的promise API以获取更多信息。 http://api.jquery.com/promise/

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

3 个答案: