The queue is about animation.

But for me, the jQuery documentation is awkward, here is a better tutorial.

The queue, is an array of functions, every element has such a queue. You can read the content of the array, add functions to array or remove functions from the array with queue() and dequeue().

Queue name

The default queue name is "fx". This queue is the animation queue. You can also define custom queue name.

var ele = $('#search');
ele.queue("expand", function () { console.log("queued function");});
ele.queue("expand", function () { console.log("another queued function"); return true;} );
var queue = ele.queue("expand");

When there is no queue name, the default "fx" is used:

ele.queue( function () { console.log("enqueue to fx");});
var queue = ele.queue();


The dequeue execute the next function. It executes the first function in the queue and shift that function from the queue.

The function is called like this

   elem, function() {
                jQuery.dequeue( elem, type );
            }, hooks );

The parameter passed to function dequeue next function. You can accept this parameter as next and call it in your complete handler or at the end of the animation code.

$('div').queue(function(next) {
    $(this).animate({opacity: 0.5},next);

This equivalent to

$('div').queue(function() {
    $(this).animate({opacity: 0.5});


When the animation is not in the "inprogress", the queued function get executed immediately.

When you execute a series of animation, the first animation is executed immediately, and it will set a sentinel string "inprogress" to the head of the queue, the subsequent animations will be queued and be executed later one by one.

The animate will automatically dequeue so the next animation step will be executed. When you are using the queue, you are customizing animation step, you have to dequeue manually, call the next function or call the dequeue explicitly.

animate and queue

The animate and functions based on animate like slideUp, fadeIn, fadeOut internally add functions to queue. With queue, you can customize your own function that be added to queue.

Custom queue

Using custom queue when you want to group a set of animations

var searchInput = $("#search"),
queueAnimation = function(c) {
              searchInput.queue("custom", c)
            queueAnimation(function(next) {
              searchInput.fadeOut(100, next)
            queueAnimation(function(next) {
                searchInput.animate({width: 220,"max-width": 220}, 100, next)
            queueAnimation(function() {
            3 == searchInput.queue("custom").length && searchInput.dequeue("custom")