# jQuery.queue()

Categories: Data | Utilities

## jQuery.queue( element [, queueName] ) Returns: Array

Description: Show the queue of functions to be executed on the matched element.

- #### version added: 1.3jQuery.queue( element [, queueName] )

  elementA DOM element to inspect for an attached queue.

  queueNameA string containing the name of the queue. Defaults to `fx`, the standard effects queue.

Note: This is a low-level method, you should probably use `.queue()` instead.

### Example:

#### Show the length of the queue.

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { margin:3px; width:40px; height:40px;
            position:absolute; left:0px; top:30px;
            background:green; display:none; }
      div.newcolor { background:blue; }
      span { color:red; }  </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      <button id="show">Show Length of Queue</button>
      <span></span>
      <div></div>
    <script>$("#show").click(function () {
          var n = jQuery.queue( $("div")[0], "fx" );
          $("span").text("Queue length is: " + n.length);
        });
        function runIt() {
          $("div").show("slow");
          $("div").animate({left:'+=200'},2000);
          $("div").slideToggle(1000);
          $("div").slideToggle("fast");
          $("div").animate({left:'-=200'},1500);
          $("div").hide("slow");
          $("div").show(1200);
          $("div").slideUp("normal", runIt);
        }
        runIt();</script>

    </body>
    </html>

#### Demo:

## jQuery.queue( element, queueName, newQueue ) Returns: jQuery

Description: Manipulate the queue of functions to be executed on the matched element.

- #### version added: 1.3jQuery.queue( element, queueName, newQueue )

  elementA DOM element where the array of queued functions is attached.

  queueNameA string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  newQueueAn array of functions to replace the current queue contents.

- #### version added: 1.3jQuery.queue( element, queueName, callback() )

  elementA DOM element on which to add a queued function.

  queueNameA string containing the name of the queue. Defaults to `fx`, the standard effects queue.

  callback()The new function to add to the queue.

Note: This is a low-level method, you should probably use `.queue()` instead.

Every element can have one or more queues of functions attached to it by jQuery. In most applications, only one queue (called `fx`) is used. Queues allow a sequence of actions to be called on an element asynchronously, without halting program execution.

The `jQuery.queue()` method allows us to directly manipulate this queue of functions. Calling `jQuery.queue()` with a callback is particularly useful; it allows us to place a new function at the end of the queue.

Note that when adding a function with `jQuery.queue()`, we should ensure that `jQuery.dequeue()` is eventually called so that the next function in line executes.

### Examples:

#### Example: Queue a custom function.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { margin:3px; width:40px; height:40px;
            position:absolute; left:0px; top:30px;
            background:green; display:none; }
      div.newcolor { background:blue; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      Click here...
      <div></div>
    <script>
       $(document.body).click(function () {
          $("div").show("slow");
          $("div").animate({left:'+=200'},2000);
          jQuery.queue( $("div")[0], "fx", function () {
            $(this).addClass("newcolor");
            jQuery.dequeue( this );
          });
          $("div").animate({left:'-=200'},500);
          jQuery.queue( $("div")[0], "fx", function () {
            $(this).removeClass("newcolor");
            jQuery.dequeue( this );
          });
          $("div").slideUp();
        });</script>

    </body>
    </html>

#### Demo:

#### Example: Set a queue array to delete the queue.

    <!DOCTYPE html>
    <html>
    <head>
      <style>
      div { margin:3px; width:40px; height:40px;
            position:absolute; left:0px; top:30px;
            background:green; display:none; }
      div.newcolor { background:blue; }
      </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>

      <button id="start">Start</button>
      <button id="stop">Stop</button>
      <div></div>
    <script>
       $("#start").click(function () {
          $("div").show("slow");
          $("div").animate({left:'+=200'},5000);
          jQuery.queue( $("div")[0], "fx", function () {
            $(this).addClass("newcolor");
            jQuery.dequeue( this );
          });
          $("div").animate({left:'-=200'},1500);
          jQuery.queue( $("div")[0], "fx", function () {
            $(this).removeClass("newcolor");
            jQuery.dequeue( this );
          });
          $("div").slideUp();
        });
        $("#stop").click(function () {
          jQuery.queue( $("div")[0], "fx", [] );
          $("div").stop();
        });
    </script>

    </body>
    </html>

#### Demo: