Description: Set a timer to delay execution of subsequent items in the queue.
Arguments
.delay( duration, [ queueName ] )
version added: 1.4
duration
An integer indicating the number of milliseconds to delay execution of the next item in the queue.
queueName
A string containing the name of the queue. Defaults to
fx, the standard effects queue.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.
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">:
When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds.
jQuery.delay() is best for delaying between queued jQuery effects and such, and is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Example
Animate the hiding and showing of two divs, delaying the first before showing it.Full source
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<script type="text/javascript" language="javascript">
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>
Was this information helpful?
