# jQuery.queue()

所属分类：数据操作 | 工具类 英文文档：jQuery.queue()
显示或操作匹配的元素上已经执行的函数列队。

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

描述: 显示在匹配的元素上的已经执行的函数列队。

- #### 添加的版本: 1.3jQuery.queue( element [, queueName ] )

  - element
    类型: Element
    一个用于检查附加列队的DOM元素。
  - queueName
    类型: String
    一个含有队列名的字符串。默认是 `fx`，标准的动画队列。

注意： 这是一个底层的方法，你应该用`.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 |
    <!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="https://code.jquery.com/jquery-latest.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 )返回: jQuery

描述: 操作匹配元素上将要执行的函数队列。

- #### 添加的版本: 1.3jQuery.queue( element, queueName, newQueue )

  - element
    类型: Element
    一个已附加列队函数数组的DOM元素 。
  - queueName
    类型: String
    一个含有队列名的字符串。默认是 `fx`，标准的动画队列。
  - newQueue
    类型: Array
    一个替换当前函数列队内容的数组。

- #### 添加的版本: 1.3jQuery.queue( element, queueName, callback() )

  - element
    类型: Element
    一个要附加列队函数的DOM元素。
  - queueName
    类型: String
    一个含有队列名的字符串。默认是 `fx`，标准的动画队列。
  - callback()
    类型: Function()
    添加到列队的新函数。

注意： 这是一个底层的方法，你应该用`.queue()`代替。

每个元素可以通过jQuery附加一个或多个函数队列。在大多数程序中，只有一个列队(名为 `fx`)被使用。队列允许一个元素来异步的访问一连串的操作，而不终止整个程序执行。

`jQuery.queue()`方法允许我们直接操纵这个函数队列。最常用的用法是调用 `jQuery.queue()` 时带一个回调函数，这样就能让我们在队列最后的添加一个新的函数。

值得注意的是，当使用`jQuery.queue()`添加一个函数的时候，务必确保在函数的最后调用了`jQuery.dequeue()`，以便能够执行队列中的下一个函数。

## 例子:

#### Example: 将一个自定义函数加入到队列中。

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 |
    <!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="https://code.jquery.com/jquery-latest.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: 通过设置一个队列数组，来删除已有的队列。

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 |
    <!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="https://code.jquery.com/jquery-latest.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: