How do I delay an animation (in jquery)

Question

How can I trigger a slideUp(); with a delayed start, but which doesn't force the rest of the code to wait until it has finished before progressing.

eg: A button is pressed and 1 second later a box disappears, but jquery is still working during that one second.

possible duplicate of [delay JQuery effects](http://stackoverflow.com/questions/251204/delay-jquery-effects) — Shog9, Mar 13 '11 at 19:15

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

See this previous SO question on exactly the same topic.

setTimeout(function() { /* code to run */ }, delay_time_in_milliseconds);

edited May 23 '17 at 12:18

Community

answered Dec 20 '09 at 00:05

Amber

score 2 · Answer 2 · edited Mar 13 '11 at 19:15

2

You can use Javascript's setTimeout() function for this.

E.g.

setTimeout(function() { $('#someid').slideUp(); }, 1000); // 1000ms = 1sec.

edited Mar 13 '11 at 19:15

Shog9

answered Dec 20 '09 at 00:06

BalusC

score 1 · Answer 3 · answered Mar 13 '11 at 19:18

You can use jQuery's .delay() method to queue animations.

$('#el').delay(1000).slideUp();

If you want to delay something else, then use JavaScript's built-in setTimeout() function.

setTimeout(function() {
    // code to be executed
}, 1000);

Note that you need to specify the delay in milliseconds in both cases. 1000 ms = 1 s.

3 Answers3