add delay to Animate

[levitymn]

Some times you would like there to be a delay between the execution of animations in a chain of animations. An example would be when you have a pop-up display that you want to wait one second before it closes on mouseleave.

An option(al parameter) to jQuery.animate that allows the specification of a delay in milliseconds would provide this functionality.

There are thousands of requests on how to do this, that can easily be found with this google query: ​http://www.google.com/search?hl=en&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficial&hs=rnJ&q=jquery+delay+animation&btnG=Search

Most solutions involve adding an animation to the chain that effectively does nothing. Most likely not very efficient and certainly not clear for code readability.

The other solution that is often suggested it to use setTimeout but that breaks the chain, rendering one of jQuery's core advantages useless.

[levitymn]

Was thinking that creating a chainable delay function would address the issue with animations and also be usable in other chained calls. That would provide a much more versatile solution.

[jrevillini]

There is a nice solution proposed here which I support: ​http://www.ryancoughlin.com/2009/01/22/jquery-timeout-function/

I agree with levitymn that it would be the most versatile way to do it.

In the simplest case, it could be used to do one thing, wait, and then do another. Ex.:

$('.myelement').fadeIn().idle(2000).fadeOut('slow');

Or to gracefully fade in a series of objects, increasing the delay a bit for each. Ex.:

$('.myelement').each(function (i) { $(this).idle(i * 100).fadeIn(); });

[dmethvin]

​http://api.jquery.com/delay/