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")

1	$("#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>

<html>

<head>

$(document).ready(function () {

$("#divflipBox").click(function () {

$("#divpanelBox1").slideDown().delay(1000).fadeOut();

$("#divpanelBox2").slideDown().delay(200).fadeOut();

});

</script>

#divflipBox, #divpanelBox {

background-color: #a0ce4e;

}

#divpanelBox1 {

width: 90px;

height: 90px;

background-color: blue;

}

#divpanelBox2 {

width: 90px;

height: 90px;

background-color: red;

}

</style>

</head>

<body>

Click to Apply DELAY()

</button><br><br>

</div><br>

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

delay() Effect in Jquery