jQuery dequeue() Method
Last Updated :
11 Jul, 2025
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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</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>
<html><head> <script src="https://code.jquery.com/jquery-1.10.2.js"> </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.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</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>
<html><head> <script src="https://code.jquery.com/jquery-1.10.2.js"> </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:
Article Tags :
