Home >>jQuery Tutorial >jQuery dequeue() Method

jQuery dequeue() Method

jQuery dequeue() Method

jQuery dequeue() method in jQuery is an inbuilt method used to remove the next function from the queue and execute that function. A queue will be a several functions waiting to run.

Syntax:
$(selector).dequeue(queueName)

Parameter Values

Parameter Description
queueName It is Optional. It is used to specifies the name of the queue
Here is an example of jQuery dequeue() Method:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
$("#start").click(function(){
var div = $("#box1");  
div.animate({height: 200}, "slow");
div.animate({width: 200}, "slow");
div.queue(function(){
  div.css("background-color", "orange");  
  div.dequeue();
});
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow");
});
});
</script> 
</head>
<body>
<p><button id="start">Start</button></p>
<div id="box1" style="background:blue;height:80px;width:80px;">
</div>
</body>
</html>

Output:

Example 2:

<html> 
<head> 
<style> 
#box2 { 
margin: 15px 0 0 0 ; 
width: 100px; 
position: absolute; 
height: 30px; 
left: 10px; 
top: 30px; 
background-color: dodgerblue; 
text-align: center; 
padding: 15px; 
} 
div.red { 
background-color: green; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
</head> 
<body> 
<div id="box2">phptpoint</div> 
<button>start</button> 
<script> 
$( "button" ).click(function() { 
$( "#box2" ) 
.animate({ left:"+=500px" }, 1000 ) 
.animate({ top:"0px" }, 1000 ) 
.queue(function() { 
$(this).toggleClass("green").dequeue(); 
}) 
.animate({ left:"50px", top:"150px" }, 1000 ); 
}); 
</script> 
</body> 
</html>

Output:
phptpoint