dequeue() Effect in Jquery

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

[, queueName ] )

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>

<html>

<head>

$(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>

</body>

</html>

Output:

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.

Note:

We need to use dequeue() method with queue() else the queue will not be closed and you will get undesired result.

dequeue() Effect in Jquery