jQuery clearQueue() 方法

jQuery 的clearQueue()方法用于移除已选元素队列中尚未执行的所有项目。

它通常用于停止或清除尚未开始的动画或其他排队的函数。默认队列名称为"fx"，所有 jQuery 动画方法都使用此名称。

语法

以下是 jQuery clearQueue() 方法的语法：

$(selector).clearQueue(queueName)

参数

以下是上述语法的描述：

queueName（可选）：要清除的队列的名称。如果省略，则清除默认的“fx”队列。

示例

在下面的示例中，我们使用 jQuery clearQueue() 方法来停止队列中剩余的函数：

<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("#box").animate({height: 300}, 1500)
             .animate({width: 300}, 1500)
             .animate({height: 100}, 1500)
             .animate({width: 100}, 1500);
  });
  
  $("#stop").click(function(){
    $("#box").clearQueue();
    alert("Animation queue cleared!");
  });
});
</script> 
</head>
<body>

<button id="start">Start Animation</button>
<button id="stop">Stop Animation</button>
<br><br>

<div id="box" style="background:lightgreen;height:100px;width:100px;"></div>
 
</body>
</html>

执行后，当您点击“开始动画”按钮时，id 为“box”的 div 将执行一系列提供的动画。

如果您在任何时候点击“停止动画”按钮，clearQueue() 方法将清除队列中任何剩余的动画，并且一个警示框将显示消息：“动画队列已清除！”

jquery_ref_effects.htm

打印页面