delay() Effect in Jquery

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().

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.