Home >>jQuery Tutorial >jQuery clearQueue() Method

jQuery clearQueue() Method

jQuery clearQueue() Method

jQuery clearQueue() method in jQuery is used to removes all items from the queue that have not yet been executed to run, and it removes the remaining functions from fx, the standard effects queue.

Syntax:
$(selector).clearQueue(queueName)

Parameter Values

Parameter Description
queueName It is Optional and is used to Specifies the name of the queue
Here is an Example of jQuery clearQueue() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
$("#start").click(function(){
$("#anibox").animate({height: 250}, 700);
$("#anibox").animate({width: 250}, 700);
$("#anibox").animate({height: 50}, 700);
$("#anibox").animate({width: 50}, 700);
});
$("#stop").click(function(){
$("#anibox").clearQueue();
});
});
</script> 
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<br><br>
<div id="anibox" style="background:#42f5d7;height:100px;width:100px;"></div>
 </body>
</html>

Output:


Example 2:

<html>
<head>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button1").click(function(){
var div = $("#aniumbox1");
div.animate({height: 50}, "slow");
div.animate({left: "+=50",top: "+=50" }, "slow");
$("span").text(div.queue().length);
});
$(".button2").click(function(){
$("#aniumbox1").clearQueue();
});
});
</script>
<style>
#aniumbox1 {
width:80px;
height:80px;
position:absolute;
left:10px;
top:100px;
background-color:#4bbbf2;
}
</style>
</head>
<body>
<button class="button1">Start</button>
<button class="button2">End</button>
<p>Length = <span></span></p>
<div id="aniumbox1"></div>
</body>
</html>

Output:

Length =