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>
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>
Output:
