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.