形体修复：效果与动画
文档摘要
第 5 章 · 形体修复：效果与动画 章节摘要：交互有了反应，还需要让反应"看得见"。本章把效果与动画当成形体修复科：基础效果负责显隐与滑动的标准动作， 负责对任意数值样式做定制修复，队列与回调负责把多个动作编排成有先后次序的康复计划。读完本章，你能为反馈类交互配上恰当的动效，并驾驭队列、中断、缓动这三个决定动画质感的关键机制。 学习目标 读完本章，你应当能够： 恰当使用 、 、 及其 、 等变体，并说清它们对 display 值的记忆规则。 用 驱动任意数值型样式，理解它为什么动不了颜色与 transform。 区分 与 两种内置缓动，知道更丰富的节奏从哪里引入。 解释动画队列的先进先出规则，用 与 处理中断与积压。 用 与回调把显隐、滑动、数值动画串成一段完整编排。
第 5 章 · 形体修复：效果与动画
章节摘要：交互有了反应，还需要让反应"看得见"。本章把效果与动画当成形体修复科：基础效果负责显隐与滑动的标准动作，
animate负责对任意数值样式做定制修复，队列与回调负责把多个动作编排成有先后次序的康复计划。读完本章，你能为反馈类交互配上恰当的动效，并驾驭队列、中断、缓动这三个决定动画质感的关键机制。
学习目标
读完本章，你应当能够：
- 恰当使用
hide、show、toggle及其fadeIn、slideUp等变体，并说清它们对 display 值的记忆规则。 - 用
animate驱动任意数值型样式，理解它为什么动不了颜色与 transform。 - 区分
swing与linear两种内置缓动，知道更丰富的节奏从哪里引入。 - 解释动画队列的先进先出规则，用
stop与finish处理中断与积压。 - 用
delay与回调把显隐、滑动、数值动画串成一段完整编排。 - 对照原生方案（CSS 过渡、Web Animations API）判断一段动效该交给谁实现。
核心概念速览
效果层的公理只有一条：动画改的是样式，编排靠的是队列。所有效果方法都在收尾时改 display 或逐帧改数值样式，而"谁先谁后"由每个元素自带的先进先出队列决定——理解了这两句，本章的三节就只是同一公理的三种应用。
子章节导航
- 5.1 基础效果：显隐与滑动——效果家族的制式动作，时长与回调的通用签名，display 记忆的坑。
- 5.2 自定义动画与缓动节奏——
animate的参数解剖、能动的与不能动的、缓动曲线对质感的影响。 - 5.3 动画队列与回调编排——队列的先进先出、
stop与finish的中断艺术、delay编排与全局开关。
子章节之间的逻辑关系
三节是"制式动作 → 定制动作 → 编排控制"的递进：5.1 是拿来就用的成品，5.2 教你自造动作，5.3 把前两节的动作排成剧目。顺序不建议打乱——队列的很多行为在 5.1 的例子里已经埋下伏笔，倒着读会觉得 5.3 凭空冒出。
修复考核单：本章可考核的知识点
形体科的验收标准是"给出一段反馈需求，你能配出节奏得当、可被打断、不积压的动效"。逐项核对：
| 考核项 | 判定动作 | 达标标准 |
|---|---|---|
| 显隐家族的签名 | 给 hide 传时长与回调 |
知道三个参数位（时长、缓动、回调）是全家族通用签名 |
| display 的记忆规则 | hide 后再 show |
说得出 show 恢复的是隐藏前的原值，不是一刀切 block |
| 淡入淡出与滑动的语义 | fadeIn 与 slideDown 各做一次 |
知道它们分别改透明度与高度，收尾同样管 display |
animate 的可动范围 |
尝试动颜色与位移 | 答出只认数值型样式，颜色与 transform 要走插件或原生 |
| 相对值与预设时长 | 写 {'left': '+=50'} 与 'fast' |
知道相对量与预设词的写法各自的展开结果 |
| 两种内置缓动的手感 | 同一距离分别用 swing 与 linear |
说得出一个先快后慢、一个匀速，质感差在哪 |
| 队列的先进先出 | 连发三个动画观察次序 | 知道默认全进队列排队，不抢占 |
stop 的两个参数 |
传不同参数组合清队列与跳到末尾 | 演示防重复触发时该用哪组参数 |
| 编排手法 | 用 delay 与回调串一段三步序列 |
序列可中断、可恢复，回调时机说得清 |
| 原生方案的分界 | 把同一段动效改写成 CSS 过渡 | 判断"状态切换交 CSS、过程控制交脚本"的分界线 |
修复科最常见的事故是队列积压：鼠标快速划过菜单十次，下拉层就排队闪十下——stop 的参数组合是止血钳，5.3 节有专案。其次是动画后元素半透明卡住，病根多在 fadeOut 被打断时停在中间值，收尾时的 display 处理没走完。
学习本章的一条建议
每学一个效果方法，就在标本页上做"连点实验"：快速触发它五次，观察行为是排队、抢占还是叠加，再去翻参数说明。动画 API 的参数表不难背，难的是对队列行为建立手感——手感只能靠制造事故再来修。
前置知识与后续延伸
前置：第 3 章 3.3 节的类名与样式操作（动画的本质是连续改样式），以及第 4 章的事件绑定（本章动画多由事件触发）。
往后走：第 6 章 AJAX 的加载反馈（转圈、淡入新数据）要用本章手法；第 7 章性能优化会讨论动画的代价与节流。如果你更关心现代方案，5.2 与 5.3 的原生对照段落给出了 CSS 过渡与 Web Animations API 的等价写法。