How to delay jQuery animation after page loading?

Question

Here is 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 run after the page starts with a 2 second delay. The problem is that it starts after the first animation. If the queue parameter is set to false , then there is no delay at all.

How can I delay animation 2 seconds after the page starts?

Answer 1

To delay animation after the page starts, set the queue to false and use setTimeout in 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 demonstration .

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

Answer 3

As I understand it, you want the second animation (left) to start 2 seconds after starting. It takes 1 second. You want the first one to start 5 seconds after launch.

So what you can do is queue them so that two seconds after the left part has finished width, you hit ...

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

http://jsfiddle.net/UuD8s/7/

This resolves it for a situation in which you are above, where they do not work at the same time, but if you want them to be executed at the same time (for example, the width should start to be reduced by half through movement), then this will not work.