jquery 手册
Ajax
属性(Attributes)
回调对象(Callbacks ..
核心(Core)
CSS
数据(Data)
延迟对象(Deferred o ..
尺寸(Dimensions)
效果(Effects)
事件(Events)
表单(Forms)
文档操作(Manipulati ..
杂项(Miscellaneou ..
位置(Offset)
插件编写(Plugin Aut ..
属性(Properties)
选择器(Selectors)
遍历(Traversing)
工具(Utilities)

Returns: ArrayArray .queue( String queueName )

描述: 显示匹配元素需要执行的函数队列。
  • version added: 1.2
  • .queue( String queueName )
  • queueName 一个字符串,包含队列名称。 默认为fx,标准队列。

Examples:

例子:

展示队列的长度。
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <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>
</head>
<body>
  
  <p>队列的长度是: <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>

Demo:

Returns: jQueryjQuery .queue( String queueName, Function callback( next ) )

Description: Manipulate the queue of functions to be executed on the matched elements.
  • version added: 1.2
  • .queue( String queueName, Array newQueue )
  • queueName 一个字符串,包含队列名称。 默认为fx,标准队列。
    newQueue 一个函数数组,用于替换当前队列内容。
  • version added: 1.2
  • .queue( String queueName, Function callback( next ) )
  • queueName 一个字符串,包含队列名称。 默认为fx,标准队列。
    callback( next ) 添加到队列的新函数,一个函数调用,将出列的下一个项目。

每一个元素可以有一个或多个通过jQuery附加的函数队列。 在大部分情况下,仅使用一个队列。队列允许异步调用元素的行动序列,不停止执行程序. 最典型的例子是在一个元素上调用多个动画方法。例如:

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

执行此语句时,该元素立即开始滑动动画,fadeIn的执行是建立在slideUp完成后才能开始的。

The .queue() 方法允许我们直接操纵函数队列。通过回调调用.queue()是非常有用的;它允许我们放置一个新函数到队列的结尾。

此功能是提供一个回调函数,与动画的方法类似,但不需要在动画执行时回调.

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

This is equivalent to:

$('#foo').slideUp(function() {
  alert('Animation complete.');
});
$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

Examples:

例子:

队列中的自定义函数.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }</style>
</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>

Demo:

例子:

设置一个队列数组来删除队列.
<!DOCTYPE html>
<html>
<head>
  <script src="../jquery.min.js"></script>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }</style>
</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>

Demo: