Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



Queue & Dequeue Explained

When we use the animate, and show, hide, slideUp, etc. effect methods, we are adding a job to the effects queue. Because by default, using queue() and passing a function, will add it to effects queue. So we are creating our own bespoke animation step:

$( ".box" ).animate({
height: 20
}, "slow" ).queue(function() {
$( "#title" ).html( "We're in the animation!" );
});

As I said though, these function come in pairs, so anything we add using queue(), we need to dequeue to allow the process to continue. In the code above, if we chained more animations on, until we call $( this ).dequeue(), the subsequent animations would not run:

$( ".box" ).animate({
height: 20
}, "slow" ).queue(function() {
$( "#title" ).html( "We're in the animation!" );
$( this ).dequeue();
}).animate({
height: 150
});

Keeping in mind that the animation won't continue until we have explicitly called dequeue(), we can simply create a pausing plugin, by adding a step in queue which sets a timer and triggers after n milliseconds, at that time, it dequeues the element:

$.fn.pause = function( n ) {
return this.queue(function() {
var el = this;
setTimeout(function() {
return $( el ).dequeue();
}, n );
});
};
$( ".box" ).animate({
height: 20
}, "slow" ).pause( 1000 ).animate({
height: 150
});

Remember that the first argument for queue() and dequeue() is fx, and that in all of these examples I'm not including it because jQuery sets the argument to fx by default - so we don't have to specify it.



Related Videos