📅 最后修改于: 2023-12-03 15:16:47.049000 🧑 作者: Mango
清空动画队列方法 clearQueue() 是 jQuery 中一个非常实用的方法。本文将为读者介绍该方法的基本功能和使用方法，并结合代码示例进行详细讲解。
在 jQuery 中，可以通过 queue() 方法为元素添加一个动画队列，队列中包含多个动画，可以实现多个动画依次执行的效果。而 clearQueue() 方法就是用来清空这个动画队列的。当页面需要快速响应时，该方法可以帮助我们取消与元素相关的动画效果，提高页面的响应速度。
clearQueue() 方法可以使用两种方式调用：
无参数调用的基本语法如下：
$(selector).clearQueue();
带参数调用的基本语法如下：
$(selector).clearQueue(queueName);
其中：
selector：必需，用于定位操作的元素选择器。queueName：可选，指定要清空的队列名称，默认为 fx。注意：带参数调用时必须将
queue()方法调用时指定的队列名称作为参数传入。
以下是一个 clearQueue() 方法的代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clearQueue() 示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
div {
position: absolute;
background-color: #f00;
width: 50px;
height: 50px;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<button id="btn1">清空队列</button>
<button id="btn2">停止动画</button>
<script>
// 创建动画队列
$("div").animate({
left: "+=200px"
}, 2000);
$("div").animate({
top: "200px"
}, 2000);
// 点击按钮1，清空所有队列
$("#btn1").click(function() {
$("div").clearQueue();
});
// 点击按钮2，停止当前动画
$("#btn2").click(function() {
$("div").stop();
});
</script>
</body>
</html>
当我们打开示例页面并点击“清空队列”按钮时，动画队列将被清空，div元素将瞬间移动到目标位置。而点击“停止动画”按钮时，当前正在执行的动画将被停止，但整个动画队列不会被清空。