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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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="https://www.journaldev.com/4652/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 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