动画队列与回调编排

5.3 动画队列与回调编排

单个动作练熟之后，真正的麻烦才开始：连续触发怎么办？上一个动画没演完用户又点了怎么办？想让某个非动画动作（比如摘类名）排在动画后面又该怎么办？这些问题的答案都指向同一台机器——每个元素自带的动画队列。本节是本章的收官，讲清队列的规矩、中断的艺术与编排的手法，把前两节的动作串成剧目。

本节摘要：动画按先进先出排队执行，链上的效果方法自动接力，非动画方法不排队（会插队）；stop 系列负责中断与清场，finish 直达终态；delay 在队列里占位制造停顿，:animated 筛出正在动的元素；jQuery.fx.off 一键全局关停。

队列的规矩：先进先出

每个元素都有一条名为 fx 的队列，效果方法被调用时只是入队，前一个出队演完，下一个才登场：

$box
  .fadeOut(300)        // 队列动作一
  .slideDown(300)      // 队列动作二：等淡出演完才开始
  .fadeIn(300);        // 队列动作三

// 对比：非动画方法不排队，立即执行
$box.fadeOut(300).addClass('gone');   // 类名立刻加上，不等动画
​

第二条规则是排错的重点：队列只收效果方法。addClass、css、text 这些操作永远即时执行，于是"想让类名等动画演完再变"的新手写法全部落空。两条正路任选：把操作写进完成回调（上节的提示条案例正是这么做的），或用 queue 方法把任意函数塞进队列：

$box
  .fadeOut(300)
  .queue(function (next) {
    $(this).addClass('gone');
    next();                    // 必须调用 next，队列才继续往下走
  })
  .fadeIn(300);
​

忘了调 next 是这个 API 的头号陷阱——队列卡死，后面的动画永远不登场。现代写法更推荐干脆用回调或下文的 Promise 形态，少一个能忘的步骤。

中断的艺术：stop 与 finish

快速连点是动画交互的日常考题。stop 家族按参数组合给出四种处置：

$box.stop();                 // 停下当前动作，后续队列照演
$box.stop(true);             // 停下并清空队列：后面的都不演了
$box.stop(true, true);       // 清空且当前动作直接跳到终态
$box.finish();               // 全部动作立刻跳到各自终态，队列清空
​

四种的适用场景可以背成一句话：换方向用 stop()，取消演出用 stop(true)，清场重演用 stop(true, true)，一步到位用 finish()。5.1 节提示条案例里的 stop(true, true) 现在可以完全读懂了——上一轮动画可能演到一半（透明度停在半路），不清场不跳终态，新一轮淡入就会从"半透明"这个不上不下的状态起步，肉眼可见地闪。

悬停场景是 stop 的经典考区：鼠标快速划过菜单多次，slideDown 与 slideUp 在队列里积压成一场"延时表演"，鼠标离开后面板还在自己动。标准处方是进出都先 stop()：

$('#menu').on('mouseenter', function () {
  $(this).stop(true).animate({ height: 120 }, 200);
}).on('mouseleave', function () {
  $(this).stop(true).animate({ height: 36 }, 200);
});
​

delay 与编排：让队列自己呼吸

delay 在队列里占一个"停顿"的位置，是编排节奏的最轻手段：

$tip.fadeIn(200).delay(1200).fadeOut(400);   // 淡入、停一秒多、淡出
$('.step').each(function (i) {
  $(this).delay(i * 150).fadeIn(300);        // 逐条渐次登场
});
​

第二行是"瀑布式入场"的惯用写法：每个元素的延迟量按序号递增，队列的占位让所有动画无需回调嵌套就错开登场。查找方面，:animated 可以选中正在演出的元素——巡检页面上"哪些动画还没演完"时很有用：$('.item:animated').length。

还有一个全局总闸值得认识：jQuery.fx.off = true 之后所有动画瞬时完成、回调照常执行。它不是给生产环境用的开关，而是自动化测试与无障碍场景的体面出口——测试不想等动画，就关掉总闸让一切即达终态。

原生对照：编排的三条现代路线

原生阵营的编排主力是 Web Animations API：el.animate(关键帧, 选项) 返回动画对象，finished 是标准 Promise，await 起来编排逻辑与同步代码几乎同形；中断对应 cancel 与 finish 方法，语义与 jQuery 队列一一可对。写新项目的复杂编排时优先它，jQuery 队列的价值更多留在存量代码的维护里。

要点复盘

• 队列只收效果方法，链式自动接力；普通方法即时执行，想排队就进回调或 queue（记得调 next）。
• stop 四式口诀：换方向 stop()、取消 stop(true)、清场 stop(true, true)、直达终态 finish()。
• 悬停展开的标准处方是进出两侧都先 stop(true)，防队列积压。
• delay 占位制造停顿，瀑布入场靠延迟量按序号递增；:animated 筛演中出现场元素。
• jQuery.fx.off 是测试与无障碍的总闸；现代复杂编排优先 Web Animations API 的 Promise 风格。

形体修复科到此结业。下一章离开页面本体，把手术刀伸到体外：用 AJAX 搬运服务端的数据。