0Pricing
jQuery Academy · 课时

串联与排队执行动画

探索如何串联多个动画方法并管理动画队列，从而为动态界面创建连续且协调的视觉效果。

串联与排队执行动画 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

动画链简介

假设您希望一个元素先移动，再改变颜色，最后淡出。如果手动依次完成这些操作，可能会很麻烦！

jQuery 中的动画链可以将多个动画方法连接起来。每个动画只有在前一个动画完成后才会开始，从而产生平滑、连续的效果。

基本链式语法

jQuery 方法通常会返回 jQuery 对象本身。这样，您就可以直接对返回结果调用另一个方法，形成“链”。

在这里，一个方框会先向右移动，然后向下移动。请尝试运行它！

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

构建复杂序列

您可以将许多动画方法连接起来。jQuery 会自动将这些动画放入内部队列，确保它们按照您定义的顺序运行。

这样可以为用户界面元素创建连续的流程。观察方框先移动、再变大，最后淡出！

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

动画队列的工作方式

连接动画方法时，jQuery 不会同时运行它们，而是将它们添加到一个称为动画队列（或“fx”队列）的特殊列表中。

  • 第一个动画会立即开始。
  • 后续动画会在队列中等待。
  • 动画完成后，jQuery 会自动从队列中取出下一个动画并启动它。

这样可以确保动画按顺序且可预测地执行。

使用 .delay() 添加暂停

有时，您需要在动画之间暂停一段时间。.delay() 方法非常适合完成这项工作！它会让动画队列中后续项目的执行暂停指定时长。

方框会移动、暂停，然后再次移动。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

在队列中运行自定义代码

您可以使用 .queue() 将非动画函数直接插入队列。这样，您就能在动画之间准确执行操作（例如更改文本或添加类）。

轮到该函数时，它就会执行。请记住，在自定义函数内部调用 next()，以告知 jQuery 继续处理队列中的下一个项目！

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

使用 .stop() 中断动画

如果您想在动画进行到一半时停止它，该怎么办？.stop() 方法可以解决这个问题。它可以停止元素当前正在运行的动画。

  • .stop(true)：停止当前动画，并清空整个动画队列。
  • .stop(false, true)：停止当前动画并直接跳到结束状态，但不会清空队列。

请谨慎使用，因为它可能会打乱您精心设计的动画序列！

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

使用 .finish() 跳到动画结束状态

.finish() 方法可以立即完成元素当前正在运行的所有动画，并清空其动画队列。

  • 它相当于对所有动画调用 .stop(true, true)。
  • 元素会立即跳到队列中所有动画的最终状态。

这对于“重置”按钮非常有用，也适合快速将元素转换到动画最终状态。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

连接各种效果

链式调用并不只适用于 .animate()！您还可以连接许多其他 jQuery 动画方法，例如 .fadeIn()、.slideUp() 和 .slideToggle() 等。

这些方法同样使用相同的动画队列，让您可以轻松创建复杂的视觉序列。

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

快速检查链式调用

请思考以下 jQuery 代码。点击按钮后，#myBox 的最终状态会是什么？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

回顾：链式调用与队列

做得很好！您已经学会了如何使用 jQuery 的动画链和队列机制创建动态、连续的视觉效果。

  • 链式调用：将多个动画方法连接起来。
  • 队列：jQuery 会按顺序管理动画。
  • .delay()：在动画之间暂停。
  • .queue()：将自定义函数插入队列。
  • .stop()：中断动画或清空队列。
  • .finish()：立即完成队列中的所有动画。

接下来，我们将深入学习自定义缓动和动画回调，以实现更加精细的控制！

常见问题解答

「串联与排队执行动画」课时是免费的吗？

是的 — 「串联与排队执行动画」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「串联与排队执行动画」这节课中我会学到什么？

探索如何串联多个动画方法并管理动画队列，从而为动态界面创建连续且协调的视觉效果。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。

「串联与排队执行动画」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 串联与排队执行动画
  2. 自定义缓动与动画回调
  3. 高级切换与滑动效果
← 返回 jQuery Academy