---

Search posts under jQuery:

---

.dequeue() - Remove executing animation from queue in jQuery

How to remove the current executing animation from the queue in jQuery?

To remove the currently executing animation from the queue and start executing subsequent item dequeue() method can be used. Please note that this method must be called inside the .queue() method.

<input type="button" id="btnDequeue" value="Dequeue Demo" />

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

<script>
$("#btnDequeue").click(function () {
    $("#divDequeue").show("fast");
    $("#divDequeue").fadeOut("slow");
    $("#divDequeue").fadeIn("slow");
    $("#divDequeue").queue(function () {
        $("#divDequeue").animate({ top: '+=200px' }, 2000);
        $(this).dequeue();
    });
    $("#divDequeue").animate({ left: '+200px' }, 2000);
});
</script>

In the above code snippet, on the click on the “btnQueue”; “divDequeue”'s .show() , .fadeOut(), and .fadeIn(), will be called and then we have kept top position animation in the .queue() function and after that .dequeue() has been called and then at last the left position has been animated. In this example, if we comment the .dequeue() line, we'll see that the next statement of left animation won't execute as the execution never goes out of .queue).