jQuery data - jQuery.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 matched elements.

Note:This is a low-level method; use .queue() more convenient.

Syntax

.queue(queueName)
Parameters Description
queueName Optional. A string value that contains 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 matched elements.

Syntax

.queue(queueName,newQueue)
Parameters Description
queueName Optional. A string value that contains 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 asynchronous action sequences on the element without terminating 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 begin 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 manipulate this function queue. Calling a .queue() method with a callback 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.');
);

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

Perform queue operations on 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