jQuery 遍历 queue() 方法

jQuery 遍历  queue() 方法

定义和用法

queue() 方法显示或操作在匹配元素上执行的函数队列。

语法

.queue(queueName)

操作队列

queue() 方法操作在匹配元素上执行的函数队列。

语法

.queue(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()，这样下一个排队的函数才能执行。

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

效果图：