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