# jQuery.queue()

Show or manipulate the queue of functions to be executed on the matched element.

## jQuery.queue ( element, queueName ) Returns: Array version added: 1.3

- element
  Type: Element
  A DOM element to inspect for an attached queue.

- queueName
  Type: String
  A string containing the name of the queue. Defaults to fx, the standard effects queue.

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

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

## Examples:

#### Example: Show the length of the queue.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <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="//code.jquery.com/jquery-1.10.2.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" )
        .animate({
          left: "+=200"
        }, 2000 )
        .slideToggle( 1000 )
        .slideToggle( "fast" )
        .animate({
          left: "-=200"
        }, 1500 )
        .hide( "slow" )
        .show( 1200 )
        .slideUp( "normal", runIt );
    }

    runIt();

    </script>

    </body>
    </html>

#### Demo:

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

- element
  Type: Element
  A DOM element where the array of queued functions is attached.

- queueName
  Type: String
  A string containing the name of the queue. Defaults to fx, the standard effects queue.

- newQueue
  Type: Array
  An array of functions to replace the current queue contents.

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

- element
  Type: Element
  A DOM element on which to add a queued function.

- queueName
  Type: String
  A string containing the name of the queue. Defaults to fx, the standard effects queue.

- callback()
  Type: Function
  The new function to add to the queue.

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

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 lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <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="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    Click here...
    <div></div>

    <script>

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

    </script>

    </body>
    </html>

#### Demo:

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

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>css demo</title>

      <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="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>

    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <div></div>

    <script>

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

    </script>

    </body>
    </html>

#### Demo: