如何在页面加载后延迟 jQuery 动画？答案

【问题标题】：How do I delay a jQuery animation after a page loads?如何在页面加载后延迟 jQuery 动画？
【发布时间】：2012-05-17 12:28:51
【问题描述】：

这是我的例子： http://jsfiddle.net/UuD8s/5/

$("#transition")
    .delay(5000)
    .animate({ width: "400px" }, { duration: 1000, queue: true });

$("#transition")
    .delay(2000)
    .animate({ left: "100px" }, { duration: 1000, queue: true });

我想在页面启动后延迟我的第二个动画开始，延迟 2 秒。问题是它在第一个动画之后开始。如果queue 设置为false，则完全没有延迟。

如何在页面启动后将动画延迟 2 秒？

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

为了在页面启动后延迟您的动画，请将 queue 设置为 false 并使用两秒的 setTimeout：

$("#transition")
    .delay(5000)
    .animate({width: "400px"}, {duration: 1000, queue: true});

setTimeout(function() {

    $("#transition").delay(2000).animate({ left: "100px" }, {
        duration: 1000,
        queue: false
    });

}, 2000);

这是live demo。

【讨论】：

【解决方案2】：

您可以使用setTimeout() 方法来延迟javascript函数。

$("#transition").delay(5000).animate({width: "400px"}, {duration: 1000, queue: true});
setTimeout(function() { 
    $("#transition").delay(2000).animate({left: "100px"}, {duration: 1000, queue: false});  
}, 2000);

【讨论】：

【解决方案3】：

据我了解，您希望第二个动画（左侧）在启动后 2 秒开始。这将需要 1 秒钟。您希望第一个在启动后 5 秒启动。

所以你可以做的就是将它们排成一列，以便在左边的一个完成宽度后的两秒内开始......

$("#transition").delay(2000).animate({left: "100px"}, {duration: 1000});
$("#transition").delay(2000).animate({width: "400px"}, {duration: 1000});

http://jsfiddle.net/UuD8s/7/

这确实解决了您在上述情况下它们没有同时运行的情况，但如果您确实希望它们同时运行（例如宽度应该在移动的中途开始缩小），那么这将不起作用。

【讨论】：