Description:
The jQuery delay() method is used to delay the execution of animation in the queue. It is a best method for delay between the queued jQuery effects.
Syntax
.delay( speed )
Ex :
$("#div").delay("1000")
Duration/speed | It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds. |
Example:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#divflipBox").click(function () { $("#divpanelBox1").slideDown().delay(1000).fadeOut(); $("#divpanelBox2").slideDown().delay(200).fadeOut(); }); }); </script> <style type="text/css"> #divflipBox, #divpanelBox { background-color: #a0ce4e; } #divpanelBox1 { width: 90px; height: 90px; background-color: blue; } #divpanelBox2 { width: 90px; height: 90px; background-color: red; } </style> </head> <body> <button id="divflipBox"> Click to Apply DELAY() </button><br><br> <div id="divpanelBox1"> </div><br> <div id="divpanelBox2"> </div> </body> </html>
Output:
After clicking the “Click to slide down using DELAY()” button, the “divpanelBox1” slides down immediately and delay/pause for 1000 milliseconds for next execution(ie.,fadeOut). In the same way, “divpanelBox2” will make pause for 200 milliseconds for fadeOut().