The dequeue method

The dequeue method allows us to execute the next function from the function queue. When the method is called, the function is removed from the queue and then executed. The function must call this method so that the chain of functions can continue executing. See also the queue method, which allows us to work with a queue of functions bound to an element.

Syntax

So we can continue working with the next functions in the queue. You can pass the queue name as an optional parameter as a string. If you do not pass any parameters, the method will work with the fx queue:

.dequeue([queue name]);

Example

In this example, using the queue method, we'll add a custom function that will recolor the square green, adding the newcolor class. As you can see, dequeue is then called here to remove the function from the queue and allow the next one to execute:

<button id="animate">start</button>
<div></div>

div {
	position: absolute;
	margin: 3px;
	width: 50px;
	height: 50px;
	left: 0px;
	top: 30px;
	background: red;
	display: none;
}

div.newcolor {
	background: green;
}

$('#animate').click(function() {
	$('div')
		.show('slow')
		.animate({left: '+=200'}, 2000)
		.queue(function() {
			$(this).addClass('newcolor').dequeue();
		})
		.animate({left: '-=200'}, 500)
		.queue(function() {
			$(this).removeClass('newcolor').dequeue();
		})
		.slideUp();
});