Hello Readers,
In this Blog I explain about the events and queue functions and how can we set interval between this events in jquery.
If you can use this then:
First, you can use queue() function (jquery function) to set time interval between events.
After that you run event and browser to wait for some time to run the next event, In this you use queue function.
As we take the example of image and we want to fadein and fadeout the image, due to this event (jquery function fadeIn() and fadeOut()).
After that when we use the above functions and want to wait for some time then we use the queue() function.
Suppose, you wanted an image to fadein and out. You can use fadeIn() and fadeOut() jQuery functions to do so. But when you like to wait for some time between fadein and fadeout then you can use the queue() function. Remember that, .dequeue() (jquery function) is necessary to write in a queue() so that the next function in line executes.
Here we use the time 1000 ms that is 1 sec to reflect the image on to the browser.
The Example with code below:
<html>
<head>
<title>Set time interval between events with queue function</title>
<script src="jquery-1.1.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 fadein and out for 5 times.<br/>
<img class="img" src="picture.jpg" alt="image" />
</div>
</body>
</html>
0 Comment(s)