A repository of over 1000 quality jQuery plugins

jQuery .delay()

Learn all about the jQuery function .delay().

Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.

Using the standard effects queue, we can, for example, set an 800-millisecond delay between the .slideUp() and .fadeIn() of <div id="foo">:

1
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );

When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn’t, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript’s native setTimeout function, which may be more appropriate for certain use cases.