.delay()
.delay( duration, [ queueName ] ) Returns: jQuery
Description: Set a timer to delay execution of subsequent items in the queue.
-
version added: 1.4.delay( duration, [ queueName ] )
durationAn integer indicating the number of milliseconds to delay execution of the next item in the queue.
queueNameA 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.
Using the standard effects queue, we can, for example, set an 800-millisecond delay between the .slideUp() and .fadeIn() of <div id="foo">:
$('#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.
Example:
Animate the hiding and showing of two divs, delaying the first before showing it.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 60px; height: 60px; float: left; }
.first { background-color: #3f3; }
.second { background-color: #33f;}
</style>
<script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
<p><button>Run</button></p>
<div class="first"></div>
<div class="second"></div>
<script>
$("button").click(function() {
$("div.first").slideUp(300).delay(800).fadeIn(400);
$("div.second").slideUp(300).fadeIn(400);
});
</script>
</body>
</html>