jQuery 遍历 - queue() 方法

实例

显示队列的长度:

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

定义和用法

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

语法

  1. .queue(queueName)
参数 描述
queueName 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。

操作队列

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

语法

  1. .queue(queueName,newQueue)
参数 描述
queueName 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中,只使用一个队列(名为 fx)。队列运行在元素上异步地调用动作序列,而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如:

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

当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。

  1. $('#foo').slideUp();
  2. $('#foo').queue(function() {
  3. alert('Animation complete.');
  4. $(this).dequeue();
  5. });

等价于:

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

请注意,当通过 .queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。

例子 1

对自定义函数进行队列操作:

  1. $(document.body).click(function () {
  2. $("div").show("slow");
  3. $("div").animate({left:'+=200'},2000);
  4. $("div").queue(function () {
  5. $(this).addClass("newcolor");
  6. $(this).dequeue();
  7. });
  8. $("div").animate({left:'-=200'},500);
  9. $("div").queue(function () {
  10. $(this).removeClass("newcolor");
  11. $(this).dequeue();
  12. });
  13. $("div").slideUp();
  14. });

例子 2

设置队列数组来删除队列:

  1. $("#start").click(function () {
  2. $("div").show("slow");
  3. $("div").animate({left:'+=200'},5000);
  4. $("div").queue(function () {
  5. $(this).addClass("newcolor");
  6. $(this).dequeue();
  7. });
  8. $("div").animate({left:'-=200'},1500);
  9. $("div").queue(function () {
  10. $(this).removeClass("newcolor");
  11. $(this).dequeue();
  12. });
  13. $("div").slideUp();
  14. });
  15.  
  16. $("#stop").click(function () {
  17. $("div").queue("fx", []);
  18. $("div").stop();
  19. });