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

Question

这是我的例子： 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秒延迟动画？

Answer 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。

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

Answer 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/

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