jQuery | clearQueue() 示例

介绍

clearQueue() 是 jQuery 中的一个方法，用于清空一个元素上的动画队列中未被执行的动画。使用该方法可以取消某些不必要的动画效果，从而提升页面性能和用户体验。

语法

$(selector).clearQueue(queueName);

• selector: CSS 选择器，用于指定要清空队列的元素
• queueName: 可选参数，用于指定要清空的队列名称。如果不指定，则默认清空所有队列。

示例

以下是一个使用 clearQueue() 方法的示例：

// HTML 代码
<div class="box"></div>

// JS 代码
$(".box")
  .animate({left: "500px"}, 2000)
  .animate({top: "200px"}, 1000)
  .animate({left: "0px"}, 2000)
  .animate({top: "0px"}, 1000);

// 向 .box 元素添加一个按钮，点击按钮后清空动画队列
$(".box").after("<button id='stop'>停止动画</button>");
$("#stop").click(function() {
  $(".box").clearQueue();
});

在这个示例中，我们向页面上的一个元素添加了一个动画，该动画会将 .box 元素向右移动 500 像素，然后向下移动 200 像素，再向左移动 500 像素，最后回到原位置。同时我们向 .box 元素添加了一个按钮，点击该按钮后可以清空未执行的动画。这样用户就可以随时停止动画。

注意事项

• clearQueue() 方法只能清空元素上未被执行的动画。如果动画已经开始执行，则无法清空。
• clearQueue() 方法只能清空动画队列，无法停止当前正在执行的动画。如果要停止正在执行的动画，应该使用 stop() 方法。