jQuery | queue() 示例

简介

queue() 是 jQuery 的队列操作方法，用于管理异步操作和动画。通过将函数添加到队列中，可以确保它们按顺序依次执行。在执行队列之前还可以对队列进行操作，如添加、删除、清空、暂停等。

语法

$(selector).queue([queueName],newQueue)

• queueName：可选。要操作的队列名称，默认为 fx，即效果队列。
• newQueue：可选。要添加到队列的新函数。

示例

$("button").click(function(){
  $("div").slideUp(2000);
  $("div").queue(function(){
    $(this).addClass("red");
    $(this).dequeue();
  });
  $("div").animate({
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

以上示例的作用：

1. 单击按钮后，<div> 元素通过滑动向上隐藏，动画时间为 2 秒。
2. queue() 方法将匿名函数添加到默认的 fx 队列中，该函数首先给 <div> 元素添加一个类 .red，然后调用 dequeue() 函数移除该函数并推进队列。
3. animate() 函数在默认的 fx 队列中添加另一个动画效果。

结果是，<div> 元素首先向上滑动隐藏，然后添加类 .red，最后执行 animate() 函数的动画效果。

更多实例

添加到队列中

$("#test")
  .queue(function() {
    $(this).addClass("newcolor");
    $(this).dequeue();
  })
  .animate({
    left: '+=200'
  })
  .queue(function() {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  })
  .slideUp();

该示例初始化了一个队列，首先将新的颜色应用于元素，然后调用 dequeue() 函数执行下一项。

清空队列中的函数

$("#test").queue("fx", []).stop();

该示例清空名为 fx 的元素队列，并立即停止目前正在进行的队列部分。

暂停和继续队列

$("button.pause").click(function() {
  $("div").queue("fx", function(next) {
    $(this).delay(1000).fadeIn(500, next);
  });
  $("div").queue("fx", function(next) {
    $(this).delay(1000).fadeOut(500, next);
  });
  $("div").dequeue("fx");
});
$("button.resume").click(function() {
  $("div").dequeue("fx");
});

该示例初始化一个名为 fx 的队列，将淡入、延迟 1 秒，淡出、延迟 1 秒的动画添加到队列中。单击暂停按钮后，队列被暂停。单击恢复按钮后，队列被重新开始。

总结

queue() 方法在 jQuery 中是一个非常强大的功能。通过该方法，您可以轻松管理异步操作和动画。除了示例中描述的一些操作外，它还可以用于队列交互、回调函数、延迟等场景。我们希望您通过这些示例能够了解 jQuery 的 queue() 方法的强大功能。