You can use jQuery
queue() function with
setTimeout()
function to set some time interval between events in jQuery. Like, you
have run one event and wanted the browser to wait for some time to run
the next event. At this instance, queue function is very helpful.
Suppose, you wanted an image to fade in and out. You can use
fadeIn() and
fadeOut() jQuery functions to do so. But when you like to wait for some time between fade in and fade out then you can use the
queue() function. Remember that,
.dequeue() is necessary to write in a queue() so that the next function in line executes.
View Demo || Download Code
Here is the full source code.
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
|
<html>
<head>
<title>jQuery: Queue</title>
<script src="jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var img = $(".img");
for(var i=0;i<4;i++) {
img.queue(function(){
setTimeout(function(){
img.dequeue();
}, 1000);
});
img.fadeOut("slow");
img.queue(function(){
setTimeout(function(){
img.dequeue();
}, 1000);
});
img.fadeIn("slow");
}
});
</script>
</head>
<body>
<div align="center">
The image will fade in and out for 5 times.<br/>
<img class="img" src="hills.jpg" alt="image" />
</div>
</body>
</html>
|
View Demo || Download Code
Thanks.
EmoticonEmoticon