jQuery dequeue() Method
Last Updated :
27 Oct, 2022
Improve
The dequeue() method is an inbuilt method in jQuery that is used to remove the next function from the queue and then it will execute the function. In a queue there will be several functions waiting to run dequeue() used to remove the top function from the queue and execute that function.
Syntax:
$(selector).dequeue(name);
Parameter: It accepts a parameter “name” which specifies the name of the queue.
Return Value: It returns the selected element that performs the given top function.
Example 1: In the below code, the dequeue() method is also used to demonstrate the dequeue method.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <style> div { margin: 15px 0 0 0; width: 100px; position: absolute; height: 30px; left: 10px; top: 30px; background-color: lightgreen; text-align: center; padding: 15px; } </style> </head> <body> <div>GfG!</div> <!-- Click on this button to perform animation --> <button>Click to start !</button> <!-- jQuery code to demonstrate animation with the help of dequeue method --> <script> $("button").click(function () { $("div") .animate({ left: "+=500px" }, 1000) .animate({ top: "0px" }, 1000) .queue(function () { $(this).toggleClass("green").dequeue(); }) .animate({ left: "50px", top: "150px" }, 1000); }); </script> </body> </html> |
Output:
Example 2: In this example, the size of the box will change when the button is clicked.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <style> div { margin: 15px 0 0 0; width: 100px; position: absolute; height: 30px; left: 10px; top: 30px; background-color: lightgreen; text-align: center; padding: 15px; } </style> </head> <body> <div id="div1">GfG!</div> <!-- Click on this button to perform animation --> <button>Click to start !</button> <!--jQuery code to demonstrate animation with the help of dequeue method --> <script> $( "button" ).click(function() { var div = $("#div1"); div.animate({width: 400}); div.animate({height: 300}); div.queue(function(){ div.css("background-color", "blue"); div.dequeue(); }); div.animate({width: 100}); iv.animate({height: 100}); }); </script> </body> </html> |
Output:
