jQuery: Set time interval between events with queue function
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,
Related posts:
- jQuery: A simple Slideshow
- jQuery: Animate and Transfer effect with Image
- jQuery: SetTimeout
- jQuery: Preview Image with Zoom Effect
- Magento jQuery: How to use them together?
- jQuery: Preview Image with Tooltip Effect
- jQuery: Print array and object
- jQuery: How to replace string, div content and image src?
- jQuery: Grey out background and preview image as popup
- Multiple file upload with jQuery and php
View Mukesh Chapagain's profile
Pingback: All About Kaldewei Baths Europe's Number One Tub Manufacturer | Elite Bathrooms