jQuery > Effects methods

.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;">
<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(); });

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 (1st animation) and after that its width will start increasing by 200px (2nd animation). Now suppose at this point user clicks Stop button then the next animation (3rd animation) item in the queue that is .slideUp() will be removed (because of .clearQueue() method) and the animation of increasing width (2nd animation) stops (because of .stop() method).

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

 Views: 1448 | Post Order: 97

Write for us