clearqueue() Effect in Jquery

Description:

The Jquery clearQueue() method removes all queued items from the queue that have not yet been executed. When the .clearQueue() method is executed then all functions on the queue that have not been executed are removed from the queue. If there is no argument then the clearQueue() will remove all the remaining functions.

Syntax

$(selector).clearQueue( queueName)

queueName It contain the name of the queue. Defaults it will be fx.

Example:

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
 <script type="text/javascript">

 $(document).ready(function () {
 var divBox = $("#divBox");
 $("#divStart").click(function () {
 divBox.animate({ height: 200 }, 2000);
 divBox.slideUp(2000);
 divBox.slideDown(2000);
 divBox.animate({ width: 300 }, 1500);
 divBox.animate({ height: 100 }, 1500);
 divBox.animate({ width: 100 }, 1500);
 });
 $("#divStop").click(function () {
 divBox.clearQueue();
 });
 });

 </script>

</head>
<body>
 <button id="divStart">Start Animation</button>
 <button id="divStop">Stop Animation</button>
 <br><br>

 <div id="divBox" style="background: #00ff21; height: 100px; width: 100px;"></div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

var divBox = $("#divBox");

$("#divStart").click(function () {

divBox.animate({ height: 200 }, 2000);

divBox.slideUp(2000);

divBox.slideDown(2000);

divBox.animate({ width: 300 }, 1500);

divBox.animate({ height: 100 }, 1500);

divBox.animate({ width: 100 }, 1500);

});

$("#divStop").click(function () {

divBox.clearQueue();

});

</script>

</head>

<body>

<button id="divStart">Start Animation</button>

<button id="divStop">Stop Animation</button>

</body>

</html>

Output:

Clicking on “Start Animation”” button, the “divBox” start with animations and stop the execution after calling the clearqueue() function. From the below output, ” divBox.animate({ width: 300 }, 1500);divBox.animate({ height: 100 }, 1500);divBox.animate({ width: 100 }, 1500);” animation steps has cleared from the queue after clicking the “stop animation” button while executing “divBox.slideDown(2000);”.

clearqueue() Effect in Jquery