📅 最后修改于: 2023-12-03 15:32:12.084000 🧑 作者: Mango
dequeue() 方法用于从匹配的元素序列中移除并执行队列中指定的下一个函数。队列可用于将多个函数按顺序排列，并依次执行它们。
$(selector).dequeue(queueName)
以下是一个用 dequeue() 方法控制动画执行顺序的示例：
<!DOCTYPE html>
<html>
<head>
<title>dequeue() 示例</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
div {
background-color: #f00;
width: 100px;
height: 100px;
margin: 10px;
position: relative;
display: inline-block;
color: #fff;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
}
.first {
left: 0;
animation: move 2s ease-in-out;
}
.second {
left: 120px;
animation: move 2s ease-in-out;
}
.third {
left: 240px;
animation: move 2s ease-in-out;
}
@keyframes move{
from {
left: -200px;
}
to {
left: 240px;
}
}
</style>
</head>
<body>
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<script type="text/javascript">
$(function(){
var divs = $("div");
divs.each(function(){
$(this).delay(1000).queue(function(){
$(this).css("background-color","#008000").dequeue();
})
})
divs.eq(2).delay(2000).queue(function(){
$(this).css("background-color","#0f0").dequeue();
})
divs.eq(1).delay(3000).queue(function(){
$(this).css("background-color","#00f").dequeue();
})
})
</script>
</body>
</html>
上述示例中通过使用 delay()、queue() 和 dequeue() 方法控制了三个元素的颜色依次变化的动画效果。
dequeue() 方法用于移除并执行队列中的下一个函数。结合 queue() 方法使用可以创建复杂的动画效果。