📌  相关文章
📜  jQuery | dequeue() 与示例(1)

📅  最后修改于: 2023-12-03 15:16:47.099000             🧑  作者: Mango

jQuery | dequeue() 与示例

简介

dequeue() 方法可从动画队列中移除并执行下一个动画。当你想要在一个元素上执行多个动画并需要确保它们按预期顺序执行时，可以使用动画队列来实现。

语法
$(selector).dequeue([queueName])

作用：从动画队列中移除并执行下一个动画。

参数：

  • queueName (可选)：指定要从中移除动画的队列的名称。
示例
示例 1

在此示例中，我们使用了 queue() 方法来创建一个带有两个动画的队列。第一个动画用于将元素向右移动，第二个动画用于将元素抖动。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '+=200px'}, "slow");
    div.animate({left: '-=200px'}, "slow");
    div.queue(function(){
      $(this).addClass("red");
      $(this).dequeue();
    });
    div.animate({left: '+=200px'}, "slow");
    div.animate({left: '-=200px'}, "slow");
    div.animate({left: '200px'}, "slow");
  });
});
</script>
<style>
div {
  position: relative;
  background-color: #abc;
  height: 60px;
  width: 60px;
  margin: 5px;
  float: left;
}
.red {
  background-color: red;
}
</style>
</head>
<body>

<button>Start</button>
<div></div>
<div></div>
<div></div>

</body>
</html>

在 queue() 方法中，我们添加了一个函数来将 red 类添加到 div 元素。然后，我们使用 dequeue() 方法移除并执行下一个动画。

示例 2

在此示例中，我们将 dequeue() 方法与 queue() 和 delay() 方法一起使用。队列中的第一个动画将元素向右移动，队列中的第二个动画将其向左移动。在第一个动画结束后，我们将元素添加到队列中并使用 delay() 方法延迟 1000 毫秒。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '+=200px'}, "slow");
    div.queue(function(next){
      $(this).animate({left: '-=200px'}, "slow");
      next();
    });
    div.delay(1000).queue(function(next){
      $(this).animate({left: '+=200px'}, "slow");
      next();
    });
    div.animate({left: '-=200px'}, "slow");
  });
});
</script>
<style>
div {
  position: relative;
  background-color: #abc;
  height: 60px;
  width: 60px;
  margin: 5px;
  float: left;
}
</style>
</head>
<body>

<button>Start</button>
<div></div>

</body>
</html>

在第一个动画结束后，我们使用了 queue() 方法将第二个动画添加到队列中。然后，在第二个动画结束前，我们使用 delay() 方法延迟了 1000 毫秒。最后，我们将元素向左移动。