The queue, dequeue & clearQueue effect of jQuery

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

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

Ads