How do I delay a jQuery animation after a page loads?

Question

Here's my example: 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 });​

I want to delay my second animation start after the page launches with a 2 second delay. The problem is it starts after the first animation. If queue is set to false there is no delay at all.

How would I delay the animation 2 seconds after page launch?

Answer 1

In order to delay your animation after page launch set queue to false and use a setTimeout of two seconds:

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

setTimeout(function() {

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

}, 2000);​

Here's a live demo.

Answer 2

You can use the setTimeout() method to delay javascript functions.

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