---

Search posts under jQuery:

---

.clearQueue() - Remove unexecuted animation from queue in jQuery

How to remove unexecuted/unused animation items from the queue in jQuery?

To remove unexecuted/unused animation items from the queue, clearQueue() method can be used.

 <input type="button" value="Start" id="btnStart" />
    <input type="button" value="Stop" id="btnStopp" />

    <div id="divStarClearQueue" style="height: 50px; width: 50px; background: yellow; left: 0px; display: none; position: absolute;">
    </div>

<script>
$("#btnStart").click(function () {
     $("#divStarClearQueue").show("slow"); //1st animation
     $("#divStarClearQueue").animate({ width: '+=200px' }, 500); // 2nd animation
     $("#divStarClearQueue").slideUp(); // 3rd animation
 });

$("#btnStopp").click(function () {
    $("#divStarClearQueue").clearQueue();
    $("#divStarClearQueue").stop();
});
</script>

In the above code snippet, on click of “btnStart” we have written 3 animation effects to take place. When user clicks on Start button, first the “divStartClearQueue” element will be shown (1^st animation) and after that its width will start increasing by 200px (2^nd animation). Now suppose at this point user clicks Stop button then the next animation (3^rd animation) item in the queue that is .slideUp() will be removed (because of .clearQueue() method) and the animation of increasing width (2^nd animation) stops (because of .stop() method).

In this case, we would not have called .clearQueue() method then the 2^nd animation would have stopped and third would start immediately but because of .clearQueue() here the 3^rd animation is removed from animation queue to execute.