jQuery dequeue() method

The dequeue() method in jQuery is used to remove the next function from the queue, and then it will execute the function. There will be several functions in a queue waiting to run; the dequeue() method will remove the function on the top and execute that function.

The dequeue() method is used together with the queue() method.

Syntax

The commonly used syntax of the dequeue() function is given below.

The dequeue() method accepts a single optional parameter, "name", mentioned in the above syntax. This parameter is used to specify the name of the queue.

Now, let's see an illustration to understand the use of the dequeue() method.

Example

<html> 
<head> 
	<style> 
		div { 
		margin: 15px;
		width: 200px; 
		height: 100px; 
		background-color: red; 
		padding: 15px; 
		} 
	</style> 
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
</head> 
<body> 
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the dequeue() method </h3>

	
	<p> Click the below button to start the animation </p>
	<button> Click me </button> 
	<div id = "div1"> </div> 
	<script> 
		$( "button" ).click(function() { 
		    var div = $("#div1");  
    div.animate({width: 500}, "fast");
	div.animate({height: 400}, "slow");
    div.queue(function(){    
	div.css("background-color", "blue");  
	div.dequeue();
    });
	div.animate({width: 200}, "slow");
	div.animate({height: 200}, "fast");	
    	}); 
	</script> 
</body> 
</html>

Test it Now

Output

After the execution of the above code, the output will be -