jQuery Data - queue() Method

jQuery Data Reference Manual

Example

Display the length of the queue:

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

Try it yourself

Definition and usage

The queue() method displays or operates on the function queue executed on the matching elements.

Syntax

.queue(queueName)
Parameters Description
queueName Optional. A string value containing the name of the sequence. The default is fx, the standard effect sequence.

Operation queue

The queue() method operates on the function queue executed on the matching elements.

Syntax

.queue(queueName,newQueue)
Parameters Description
queueName Optional. A string value containing the name of the sequence. The default is fx, the standard effect sequence.

Detailed description

Each element can have one or more function queues added by jQuery. In most applications, only one queue (named fx) is used. The queue runs a sequence of actions asynchronously on the element without terminating the program execution. A typical example is calling multiple animation methods on an element. For example:

$('#foo').slideUp().fadeIn();

When this statement is executed, the element will immediately start its sliding animation, but the fade-in transition is placed in the fx queue and will only be called after the sliding transition is complete.

.queue() method allows us to directly operate on this function queue. Calling a .queue() method with a callback function is particularly useful; it allows us to place a new function at the end of the queue.

This feature is similar to the callback functions provided by animation methods, but it is not necessary to set a callback function while the animation is executing.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});;

Is equivalent to:

$('#foo').slideUp(function() {
  alert('Animation complete.');
);

Please note that when adding functions via .queue(), we should ensure that .dequeue() is called ultimately so that the next queued function can execute.

Example 1

Queue operations for custom functions:

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

Try it yourself

Example 2

Set the queue array to remove the queue:

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  );
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  );
  $("div").slideUp();
);
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
);

Try it yourself

jQuery Data Reference Manual