jQuery: Set time interval between events with queue function
26 January 2010
180 views
One Comment
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.
Here is the full source code.
<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>
Cheers,
Popularity: 17%
Related posts:
(No Ratings Yet)
Loading ...
[...] jQuery: Set time interval between events with queue function … [...]
Leave your response!