Description:
Execute the next function on the queue for the matched element. When jQuery.dequeue() is called, the next function on the queue is removed from the queue, and then executed.
Syntax
$(selector).dequeue( element
Clicking on “Start Queue with Dequeue” button, the “divBox” start with animations and skip the execution of the queue function when it reach .dequeue() method. We need to use dequeue() method with queue() else the queue will not be closed and you will get undesired result.
element
Need to secify the DOM element to remove and execute a queued function.
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 () {
$("#divstart").click(function () {
$("#divBox")
.animate({ left: '+=200px' }, 2000)
.queue(function () {
$(this).css("background-color", "#1a80b6");
$.dequeue(this);
})
.animate({ left: '10px', top: '30px' }, 1000)
.animate({ height: '200px', width: '200px' }, 1000);
});
});
</script>
</head>
<body>
<button style="margin: 20px;" id="divstart">Start Queue with Dequeue</button>
<div id="divBox" style="margin: 50px;position: absolute;width: 80px;height: 80px;left: 10px;top: 30px;background-color: #4CAF50;"></div>
</body>
</html>
Output:
Note: