如何在页面加载后延迟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);?

这是一个现场演示.