Home >>jQuery Tutorial >jQuery delay() Method

jQuery delay() Method

jQuery delay() Method

jQuery delay() method in jQuery is used to set a timer to delay the execution of the next item in the queue, in other words it is used to make a delay between the queued jQuery effects.

Syntax:
$(selector).delay(speed,queueName)

Parameter Values

Parameter Description
speed It is an Optional parameter and is used to specifies the speed of the delay

Its Possible values are:

  • milliseconds
  • "slow"
  • "fast"
queueName It is an Optional parameter and is used to specifies the name of the queue
Here is an Example of jQuery delay() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
$("#div3").delay(50).fadeIn();
$("#div4").delay(100).fadeIn();
$("#div5").delay(150).fadeIn();
});
});
</script>
</head>
<body>
<button>Click Here</button>
<br><br>
<div id="div1" style="width:40px;height:40px;display:none;background-color:#4bbbf2;"></div><br>
<div id="div2" style="width:40px;height:40px;display:none;background-color:#1fbf9a;"></div><br>
<div id="div3" style="width:40px;height:40px;display:none;background-color:#16f26a;"></div><br>
<div id="div4" style="width:40px;height:40px;display:none;background-color:#a5db27;"></div><br>
<div id="div5" style="width:40px;height:40px;display:none;background-color:#f5c431;"></div><br>
</body>
</html>

Output:







Example 2:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
<!-- jQuery code to show the working of delay method -->
$("#btn1").click(function() { 
$("#box1").animate({ 
height: "100px" 
}); 
$("#box1").animate({ 
width: "100px" 
}); 
$("#box1").delay(900).animate({ 
width: "200px", 
padding: "30px" 
}); 
}); 
}); 
</script> 
<style> 
#box1 { 
display: block; 
width: 100px; 
height: 100px; 
background-color: blue; 
font-size: 30px; 
padding: 10px; 
} 
</style> 
</head> 
<body> 
<div id="box1"></div>  
<p> 
<button id="btn1">Click Me!</button> 
</p> 
</body> 
</html>

Output: