There are different techniques in every programming language to pause execution for a fixed amount of time. As in the previous article, we have discussed JavaScript sleep with different methods to delay a program.
In jQuery, users can use the delay() function, a pre-defined method that determines and set a timer value for running the impending code after a given period. Let us learn from this article an in-depth idea about jQuery sleep using different code snippets.
What is jQuery sleep?
In jQuery, to sleep, pause, wait, or delay a program for some seconds using jQuery is known as jQuery sleep. It is a simple technique where programmers use the built-in method called delay() that sets a timer to execute the execution of the jQuery program.
This method is available in almost every web-based application development programming language. Also, the jQuery extension from JavaScript facilitates a user with different options, among which one method is the delay() method.
Syntax:
($selector).delay(speed, Name)
The parameters used in the method are as follows:
Here, users can use two parameters, namely:
Speed Parameter: Users can use this parameter to set the delay speed. They can pass the speed value as an integer in milliseconds or pass the two other values as either slow or fast. This parameter is optional.
Name Parameters: Users can use this parameter to specify the queue name. This parameter is also optional.
String ‘slow’ and ‘fast’ used to speed of animation
- slow: 200-millisecond
- fast: 600-millisecond
Note: For this parameter, the standard queue effect "x" is the default value of it.
Let us look into some different examples of how o use the delay() method using jQuery:
Example 1: delay() method
Users can use the delay() method with an integer value and pass any input (such as text, animation, image, or video) in the console, and they can test the delay time via output.
Code Snippet:
<html>
<head>
<title>jQuery Sleep</title>
<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(2000).fadeIn();
});
});
</script>
</head>
<body>
<button id = "btn">Click the Button</button>
<div id = "dv1" style = "width:300px; height:40px; display:none; background-color:grey;">Here, we will get the message after 2000 milliseconds </div>
</body>
</html>
Output:
Explanation:
In the above example, we first created an HTML code and used the jQuery delay() method inside the HTML <script> tag and understand how it works. Here, we passed 2000 milliseconds within the delay() method, i.e., 2 seconds, and the browser will display the message sharp after 2000 milliseconds.
We used the HTML <div> tag to show the message in the browser console. Also, we have used the fadeIn() method that gradually modifies the opacity for the specified elements from hidden to visible according to the fading effect. In this method, we can optionally use three parameters, or in other words, it accepts three parameters.
But in the above code, we have not passed any parameter in the fadeIn() method.
Example 2: It is another example where the delay() method pauses the execution of the HTML and jQuery programs according to the user's instructions.
Code Snippet:
<html>
<head>
<title>jQuery Sleep</title>
<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 the Button</button>
<div id = "dv1" style = "width:300px; height:40px; display:none; background-color:yellow;">Here, we will get the message after 2000 milliseconds </div>
</body>
</html>
Output:
Explanation:
In the above code snippet, we have used the delay() method of jQuery and passed the "slow" value. In the browser console, we can see that it displays the message a few seconds later.
Example 3: There are several ways to display the HTML elements using the jQuery delay() method. This example will show how to delay an animation using the jQuery delay() method.
Code Snippet:
<html>
<head>
<title>jQuery Sleep</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("div").animate({
height: "300px"
});
$("div").animate({
width: "300px"
});
$("div").delay(500).animate({
width: "500px",
padding: "50px"
});
});
});
</script>
<style>
#d {
display: block;
width: 300px;
height: 200px;
background-color: yellow;
font-size: 50px;
padding: 20px;
}
</style>
</head>
<body>
<div id = "d" >Make some animations</div>
<p><button id = "btn1">Click Here</button></p>
</body>
</html>
Output:
After clicking the button:
Explanation:
We can use any animation style in the HTML code and apply the jQuery sleep using the delay() method. When users click the button, the browser will display the animation according to the specified time.
Example 4: Also, users can use multiple elements and set a timer to delay their execution. The following code snippet will make you understand how to apply multiple HTML elements with different timers.
Code Snippet:
<html>
<head>
<title>jQuery Sleep</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#d1").delay("fast").fadeIn();
$("#d2").delay("slow").fadeIn();
$("#d3").delay(800).fadeIn();
$("#d4").delay(1000).fadeIn();
});
});
</script>
<style>
#d {
display: block;
width: 300px;
height: 200px;
background-color: yellow;
font-size: 50px;
padding: 20px;
}
</style>
</head>
<body>
<button>Click Here</button>
<br> <br>
<div id = "d1" style = "width:100px;height:100px;display:none;background-color:red;" ></div>
<br>
<div id = "d2" style = "width:100px;height:100px;display:none;background-color:yellow;"></div>
<br>
<div id = "d3" style = "width:100px;height:100px;display:none;background-color:blue;" ></div>
<br>
<div id = "d4" style = "width:100px;height:100px;display:none;background-color:orange;" ></div>
<br>
</body>
</html>
Output:
Explanation:
The delay() method delays every element individually according to the specified time. We can see the browser displaying four different squares at the specified period.
Conclusion:
We hope this article has catered to all the various techniques related to jQuery sleep. The delay() method is one of the typical methods that users can use to pause the execution of functions in the queue.