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

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

jQuery | queue() 示例

queue() 方法是 jQuery 中的一个用来管理函数队列的函数。函数队列的一个常见用途是在一个元素上执行一系列动画。通过使用 queue() 方法，可以把多个函数加入到队列中，并且可以指定它们运行的顺序。

语法
$(selector).queue([queueName], newQueue)
  • selector: 必需，jQuery 表达式，选择待操作的元素
  • queueName: 可选，一个字符串，代表函数队列的名字，默认是 'fx'
  • newQueue: 可选，一个数组或者函数，代表要添加到队列中的函数列表
代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery | queue() 示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
</head>
<body>
  <button id="btn">点击执行动画</button>
  <div id="box"></div>
  <script>
    // 给按钮添加点击事件
    $('#btn').on('click', function() {
      // 定义要运行的函数队列
      var fx = $([
        function(next) {
          $('#box').animate({
            left: '+=200'
          }, 'slow', next);
        },
        function(next) {
          $('#box').animate({
            top: '+=200'
          }, 'slow', next);
        },
        function(next) {
          $('#box').animate({
            left: '-=200'
          }, 'slow', next);
        },
        function(next) {
          $('#box').animate({
            top: '-=200'
          }, 'slow', next);
        }
      ]);

      // 把队列加入到元素中
      $('#box').queue('fx', fx);
      
      // 启动队列
      $('#box').dequeue('fx');
    });
  </script>
</body>
</html>
运行效果

queue-animation-example

解释说明

以上代码的作用是给一个按钮添加一个点击事件。当点击按钮后，将要执行一个动画，动画效果是让一个红色的方块向右移动 200 像素，然后向下移动 200 像素，再向左移动 200 像素，最后向上移动 200 像素，回到起始位置。

这个动画实现的思路是使用了 queue() 和 dequeue() API。首先定义一个函数队列 fx，包含了四个动画函数。然后使用 queue() 方法将这个队列添加到方块元素的队列中。最后使用 dequeue() 方法启动队列，第一个函数开始执行，直到队列为空。这个过程中，每个动画都分别使用了 next 参数来执行下一个函数的回调。