Updated March 20, 2023
Overview of jQuery delay()
JQuery delay() is a pre-defined method available in javascript, which is used to define and set a timer value for executing the upcoming code after the set time period. The syntax for this function is ‘($selector). delay (speed.name), where speed.name represents the delay value and name is an optional parameter used to title this function in the execution queue. This function is available in many web based application development programming language and the jQuery extension from javascript is eases the user with options like delay() function.
Syntax:
($selector).delay(speed, Name)There are two parameters used in it which are explained below:
- Speed Parameter: Speed is an optional parameter that is used to specify the delay speed. The speed value can be pass as an integer in milliseconds or other two values slow and fast.
- Name Parameters: Name is also an optional parameter that is used to specify the queue name. The standard queue effect “fx” is the default value of the name parameter.
Examples of jQuery delay()
There are different types of delay() examples are listed below with different conditions:
Example #1
Here we are using the delay() method with an integer value. Next, we write the HTML code to understand the jQuery delay() effect more clearly with the following example.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#dv1").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<button id="btn" > Click Here </button> <br>
<div id="dv1" style="width:250px; height:50px; display:none; background-color:red;">
This message is display in 4 seconds </div> <br>
</body>
</html>Output:
The output of the above code is –
Once the Click Here button click, the output is –
In the above code the delay( ) method pass the 4000 that is 4 seconds, so the red box with the text display after 4 seconds, because to that div tag the delay( ) method is applied.
In the above code the fadeIn( ) method is also using. The use of the fadeIn( ) method is to change the opacity gradually for the selected elements from hidden to visible as the fading effect. The fadeIn( ) method optionally accepts three parameters, but in the above code, we are not passing any of the parameters.
Example #2
Here we are using the delay( ) method with “slow” value. Next example code where the slow value is passing to the jQuery delay( ) method as given below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#dv1").delay("slow").fadeIn();
});
});
</script>
</head>
<body>
<button id="btn" > Click Here </button> <br>
<div id="dv1" style="width:250px; height:50px; display:none; background-color:red;">
This message is displing by slow value in delay() method.</div> <br>
</body>
</html>Output:
The output of the above code is –
Once the Click Here button click, the output is –
Example #3
Here we are using the jQuery delay() method with “fast” value. Next example code where the slow value is passing to the jQuery delay() method as given below.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#dv1").delay("fast").fadeIn();
});
});
</script>
</head>
<body>
<button id="btn" > Click Here </button> <br>
<div id="dv1" style="width:250px; height:50px; display:none; background-color:red;">
This message is displing by fast value in delay() method.</div> <br>
</body>
</html>Output:
The output of the above code is –
Once the Click Here button click, the output is –
Example #4
Example of jQuery delay( ) method with different values. Next, we write the HTML code for jQuery delay() effect example where we are using all three values slow, fast and milliseconds.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#dv1").delay("slow").fadeIn();
$("#dv2").delay("fast").fadeIn();
$("#dv3").delay(2000).fadeIn();
});
});
</script>
</head>
<body>
<button id="btn" > Click Here </button> <br>
<div id="dv1" style="width:250px; height:50px; display:none; background-color:red;">
This message is displing by slow value in delay() method. </div> <br>
<div id="dv2" style="width:250px; height:50px; display:none; background-color:green;">
This message is displing by fast value in delay() method. </div> <br>
<div id="dv3" style="width:250px; height:50px; display:none; background-color:blue;">
This message is displing by 2 seconds value in delay() method. </div> <br>
</body>
</html>Output:
The output of the above code is –
Once the Click Here button click, the output is –
The above code we rewrite and here we are passing the speed value to the fadeIn() method, so that each box which we are displaying here by the fade effect will be displayed with some speed (which is passed) of the fade effect.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#dv1").delay("slow").fadeIn( 3000 );
$("#dv2").delay("fast").fadeIn( 3000 );
$("#dv3").delay(2000).fadeIn( 3000 );
});
});
</script>
</head>
<body>
<button id="btn" > Click Here </button><br>
<div id="dv1" style="width:250px; height:50px; display:none; background-color:red;">
This message is displing by slow value in delay() method. </div> <br>
<div id="dv2" style="width:250px; height:50px; display:none; background-color:green;">
This message is displing by fast value in delay() method. </div> <br>
<div id="dv3" style="width:250px; height:50px; display:none; background-color:blue;">
This message is displing by 2 seconds value in delay() method. </div> <br>
</body>
</html>Output:
The output of the above code is –
Once the Click Here button click, the output is –
Recommended Articles
This is a guide to jQuery delay(). Here we discuss a brief overview, parameters of jQuery delay() with implementation and various examples. You may also look at the following articles to learn more –
