Share on Google+Share on Google+

The queue, dequeue & clearQueue effect of jQuery

Advertisement
In this tutorial, we will discuss about the queue, dequeue & clearQueue effects of jQuery.

The queue, dequeue & clearQueue effect of jQuery

In this tutorial, we will discuss about the queue, dequeue & clearQueue effects of jQuery. Given below the functionality of the queue, dequeue & clearQueue effects :

queue : This function contains queue of functions to be executed when the element match.

dequeue   : When this function is called , the next element in the queue executes.

clearQueue : When this method is called, all functions on the queue that have not been yet executed are removed from the queue.

queueEffect.html

<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},1500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
$("div").clearQueue();
// you can use below line in place above :
//$("div").queue("fx", []);
$("div").stop();
});</script>
</body>
</html>

OUTPUT

When we click on 'start' button , the animation starts :

When we click on 'stop' button ,the animation stops :

Download Source Code

Click here to see demo

Advertisements

Advertisement

Posted on: August 6, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.