jquery - 如何在页面加载后延迟 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 .