jQuery delay() function

Filed Under: jQuery

jQuery delay function is used to delay the execution of items in the queue. This method sets a timer to delay the execution.

jQuery delay()

Here is the general syntax for using jQuery delay() function:

selector.delay(Integer speed, String queueName)

speed defines the duration of the delay effect. Durations are specified in milliseconds.

queueName is the name of the queue on which delay function will execute. This is an optional argument. Default value is fx which is the standard effects queue.

jQuery delay function

Following example demonstrates the application of jQuery delay function to delay animation.


<!doctype html>
<html>
<head>
<title>jQuery delay Function</title>
<style>
div {
position: absolute;
width: 70px;
height: 70px;
float: left;
}
.div1{
background-color: red;
left: 0;
}
.div2{
background-color: black;
left: 80px;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<p><button>jQuery Delay Demo</button></p>
<div class="div1"></div>
<div class="div2"></div>
<script>
$( "button" ).click(function() {
$( "div.div1" ).toggle( 300 ).delay( 2000 ).fadeIn( 400 );
$( "div.div2" ).toggle( 300 ).slideDown( 1000 );
});
</script>
</body>
</html>

As you can see that in above example, fadeIn effect is delayed by 2 seconds using jQuery delay() function.

Below image shows the jQuery delay function usage in action to delay animation.

jQuery delay function, jQuery delay animation

jQuery delay animation live demo

Click on the below button to see the above example output.

jQuery delay function is very helpful for jQuery animation. This method is added to the 1.4 version of jQuery. This method is used at its best to delay the queued effects in jQuery.

Reference: API Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages