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. The delay() 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 jQuery 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>
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 jQuery 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;”>
</div> <br>
</body>
</html>
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;”>
</div> <br>
</body>
</html>
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;”>
</div> <br>
<div id=”dv2″ style=”width:250px; height:50px; display:none; background-color:green;”>
</div> <br>
<div id=”dv3″ style=”width:250px; height:50px; display:none; background-color:blue;”>
</div> <br>
</body>
</html>
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;”>
<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>
The code added below represents the horizontal slider with the handle, movable with the mouse keys.
Code:
<!doctype html><html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>jQuery UI delay – Default functionality</title>
<script>$( function() { $( “#slider” ).slider();} );
</script></head><body>
<div id=”slider”></div>
</body></html>
Its made in such a way that when user will click at the input box, an interactive calendar will open up and can be closed by using ESC key in the otherwise case.
Code :
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-
scale=1″>
<title>jQuery UI Datepicker – Default functionality</title>
<link rel=”stylesheet”
<script src=”https://code.jquery.com/jquery-
1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-
ui.js”></script>
<script>
$( function() {
$( “#datepicker” ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type=”text” id=”datepicker”></p>
</body>
</html>
Example
Code:
<html>
<head>
<title>appendTo() Demo</title>
<script src = “https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script>
$(document).ready(function() {
$(“div”).click(function () {
$(this).appendTo(“#append_demo”);
});
});
</script>
<style>
.mydiv{
margin:12px;
padding:10px;
border:1px dotted #ccc;
width:50px;
}
</style>
</head>
<body>
<p>Click on the square to see the output:</p>
<p id = “append_demo”> This is the output… </p>
<hr />
<div class = “mydiv” style = “background-color:#52526a;”></div>
<div class = “mydiv” style = “background-color:#ff7a7a;”></div>
<div class = “mydiv” style = “background-color:#1c451c;”></div>
</body>
</html>
As shown in the image, each time when you click on the square, then the horizontal line will be appended every time.
Example
Code:
<html>
<head>
<meta charset=”utf-8″>
<title>appendTo() Demo</title>
<style>
#append_demo {
background: #E6D2C0;
display: block;
border: 1px dotted red;
padding: 12px;
width: 200px;
}
</style>
<script src=”https://code.jquery.com/jquery-1.10.2.js”>
</script>
</head>
<body>
<span>Hello World!!!</span>
<div id=”append_demo”>–> </div>
<script>
$(“span”).appendTo(“#append_demo”);
</script>
</body>
</html>
Learn more about programming at mcp