3

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:"name" 显然应该将它们链接到同一个队列中...尽管这只会阻止它们为我工作。

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

大多数建议都是关于为一个元素设置动画，或者设置许多函数并使用回调来“迭代”这些函数——如果你问我，这不是很干净。我只是希望能够在我要求时运行动画列表。

注意：动画的“列表”可能一次为一个元素设置动画，但我也可能希望两个或更多元素在列表中的某个点同时设置动画。这是一个示例：

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

3 回答 3

10

你有很多选择，但这是我要做的（因为我喜欢不言自明的语法）：

$.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/

于 2013-08-28T22:36:50.763 回答
3

你有几个选择。

延迟它：

$("#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() 对我来说看起来最干净，但可能不太易于维护。尽管替代方案也不是那么可维护的。

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

于 2013-08-28T22:12:04.087 回答
0

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

例如，

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

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

于 2013-08-28T22:11:05.240 回答