返回值:Arrayqueue([queueName])

显示匹配元素上将要执行的函数队列。

示例:

显示队列长度。

<!DOCTYPE html>
<html>
<head>
<style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  </style>
<script src="jquery.min.js"></script>
</head>
<body>


  <p>The queue length is: <span></span></p>
  <div></div>

<script>


var div = $("div");

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);
}

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();


</script>
</body>
</html>

演示:

返回值:jQueryqueue([queueName], newQueue)

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

通过 jQuery，可以为每个元素绑定一个或多个函数队列。在大多数应用里，通常只使用一个队列(即 fx)。可以在队列中以异步方式在元素上调用多个动作而不会让程序停止。典型的例子就是在一个元素上调用多个动画方法。例如： 

$('#foo').slideUp().fadeIn();

当上述语句被执行时，元素会立刻开始执行滑动动画，此时，渐变动画被加入 fx 队列中，当滑动动画执行完之后，才会开始渐变动画。

.queue() 方法允许我们直接操作函数队列。调用带回调函数的 .queue() 是特别有用的，它允许我们在队列的最后添加新函数。

该函数的功能类似于在动画方法中提供了回调函数，但是不要求在动画执行时指定回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

上述代码等价于如下代码：

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

注意，当通过 .queue() 添加函数时，我们应该保证在函数最后调用了 .dequeue()，这样就能让队列中的其它函数按顺序执行。

从 jQuery 1.4 开始，向队列中追加函数时，可以向该函数中传入另一个函数，作为第一个参数。当调用函数时，会自动从函数队列中弹出下一个项目，保证队列中函数的继续进行。我们可以像下面这样使用： 

$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

示例:

向队列中添加自定义函数。

<!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="jquery.min.js"></script>
</head>
<body>

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

<script>

$(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();
    });

</script>
</body>
</html>

演示:

示例:

设置一个队列数组，用于删除队列。

<!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="jquery.min.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);
      $("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();
    });

</script>
</body>
</html>

演示: