Skip to content
jQuery delay | 2 examples to Learn delay method
In This Tutorial
Watch Video of this Tutorial
The delay method of jQuery
You might have noticed scrolling images in a website home page showing products or services etc. These images may also have text info that should be delayed in order to let visitors read the text information and image message clearly.
Similarly, a news ticker where news is scrolling or moving right to left, for example, you may want to delay next news item to appear for some interval so that user can easily read.
See an example of delay method
jQuery comes up with a delay() method that can be used to delay next item execution. For example, you have three div elements in your web page and need to display one by one with specific intervals. You can do this by using jQuery delay method.
delay with hide method example
The delay jQuery method takes a parameter where you can specify the time to delay in milliseconds. Besides, you can also specify “fast” or “slow” as the value in delay method.
Below we will show you examples of using delay method, let us first look at the syntax.
Syntax of jQuery delay() method
The basic syntax of $.delay method is:
$(elemet).delay(delay_value)
Where delay value can be:
- fast
- slow
- in milliseconds
delay in jQuery with fadeIn div boxes example
The following example shows how to use jQuery delay method. The example below uses three div elements, each of which contains a different color block.
As you click on the button “Click here to see delay method working” the jQuery fadeIn() method starts showing boxes. Where in each fadeIn method, the delay is given to show the boxes: the first box by 0.5 sec, second by 1.5 sec and last one by 3 seconds.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.10.1.min.js”></script>
<script>
$(document).ready(function(){
$(“#fadebutton”).click(function(){
$(“#blackblock”).delay(500).fadeIn(“slow”);
$(“#cyanblock”).delay(1500).fadeIn(“slow”);
$(“#orangeblock”).delay(3000).fadeIn(1000);
});
});
</script>
<style>
.blackblock {
width:200px;
height:200px;
display:none;
background-color:black;
}
.cyanblock {
width:200px;
height:200px;
display:none;
background-color:cyan;
}
.orangeblock {
width:200px;
height:200px;
display:none;
background-color:orange;
}
</style>
</head>
<body>
<button id=“fadebutton”>Click here to see delay method working</button>
<br>
<div id=“blackblock” class=“blackblock”></div>
<div id=“cyanblock” class=“cyanblock”></div>
<div id=“orangeblock” class=“orangeblock”></div>
</body>
</html>
|
delay example with hide() method in paragraph elements
The example below uses the jQuery delay() method with jQuery hide method.
The example has two paragraphs; one yellow and the other is red line with text. As you click on the button “Hide yellow and red lines”, the hide method will hide both lines, however, the delay jQuery method will delay hiding by 0.5 sec for the yellow line while 1.5 sec for the red line.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<title>jQuery Testing</title>
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script type=“text/javascript” language=“javascript”>
$(document).ready(function() {
$(“.hidetext”).click(function () {
$(“.text”).delay(500).hide(“slow”);
$(“.text2”).delay(1500).hide(“slow”);
});
});
</script>
</head>
<body>
<button class=“hidetext”>Hide yellow and red lines</button>
<p class=“text” style=“background-color:yellow;”>
This is Yellow line!!
</p>
<p class=“text2” style=“background-color:red;”>
This is red line!!
</p>
</body>
</html>
|
Also see jQuery show | jQuery hide | jQuery fadeIn | jQuery fadeout | jQuery animate
Leave A Comment?