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

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

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

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

  - 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.

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

## Example:

Show the length of the queue.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.queue 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="https://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

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

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

  - 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.

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

  - 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.

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:

Queue a custom function.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.queue 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="https://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:

Set a queue array to delete the queue.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.queue 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="https://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: