江湖高手过招，讲究一个“快”字；网页元素登场，讲究一个“顺”字。 凭空冒出太生硬，缓缓淡入才有气度。这一式，我们修炼显隐与动画——让元素来去如风，却毫不突兀。

本式要点
  • 掌握 hide / show / toggle 三件套与速度参数
  • 会用 fade 系与 slide 系两组现成动画
  • 学会 animate() 自定义数值动画，并诚实认识它的边界
  • 理解动画队列与 stop()，用回调函数安排“动画之后的事”
  • 队列细活：fadeTo 指定透明度、delay 停顿、queue 看队、finish / clearQueue 催队与清队

显示与隐藏：hide / show / toggle

想让元素消失又不想删掉它，用 hide()；想让它回来，用 show()； 想在两者之间来回切，用 toggle()。三件套默认立刻执行； 一旦传一个“速度”参数，就变成了动画。

写法效果
$('#box').hide()立刻隐藏（相当于 display:none）
$('#box').hide('fast')200 毫秒内藏起来
$('#box').show('slow')600 毫秒内现身
$('#box').show(1000)1 秒内现身
$('#box').toggle()显示与隐藏自动切换（带速度就是动画切换）

速度参数只有三种写法：

  • 'fast'——200 毫秒，快刀斩乱麻；
  • 'slow'——600 毫秒，慢条斯理；
  • 数字（如 1000）——自定毫秒数；不传则用默认值 400 毫秒。
心法：hide/show 动画动了三样东西

hide('slow') 会同时把元素的宽、高、透明度收到 0 再藏起； 而 fadeOut 只动透明度，slideUp 只动高度。想要哪种“消失感”，就选哪个招式。

淡入淡出：fadeIn / fadeOut / fadeToggle

fade 三兄弟只动透明度：fadeOut 把元素慢慢变透明再藏起， fadeIn 反过来，fadeToggle 自动判断该进还是该出。 它们同样接受速度参数，还接受第二个参数——完成回调，动画结束后才执行： $('#box').fadeOut(600, function () { console.log('藏好了'); });

例 1 · 淡入淡出的卡片
修行手记

今日功课：fadeIn 与 fadeOut 各练三遍。

拆解：$('#jq06-card').fadeToggle('fast')——找到卡片，让它以“快”速在淡入与淡出之间自动切换。 外层那个 min-height 的舞台，是为了卡片隐去时按钮不跟着跳动——这是演示里的小心机，实战里也常用。

滑动开合：slideUp / slideDown / slideToggle

slide 三兄弟只动高度，像卷轴收起、抽屉合上：slideUp 收起、 slideDown 展开、slideToggle 开合切换。面板、折叠菜单、手风琴，都是它的用武之地。

例 2 · 滑动面板的开与合

面板一开始用内联样式 display:none 藏好，第一下点击就是“展开”。 jQuery 会先测量它的真实高度，再从 0 平滑滑开——高度不用你操心。

自定义动画：animate()

现成招式不够用时，用 animate() 自创：第一个参数是“属性对象”，写清要动画的 CSS 属性与目标值； 第二个参数是时长（可选），第三个是完成回调（可选）。看一个方块走位的例子——

例 3 · 方块向右移动 200px

两个要点：

  • 只能动画数值属性——宽高、位置、透明度都可以；属性值一般带单位（'200px'）。 元素要先有定位（position 不是默认的 static），left/top 才听指挥；
  • 颜色不能直接动画——颜色不是单一数值，核心 jQuery 不做颜色插值，需要挂 jQuery.Color 插件。 诚实交代：本教程不展开颜色动画。

动画队列、回调与 stop()

对同一个元素连续调用动画，它们不会互相打架，而是排队执行——这叫动画队列。 例 4 的“连招”按钮就是两招排队：先右移 200px，走到位后，再向下 3rem。

例 4 · 动画队列与 stop() 急停

试试连招进行到一半时点两个急停按钮，感受区别。队列像食堂打饭的队伍：

  • stop()——把当前这一招喊停，排在后面的照常登场；
  • stop(true)——连当前带队列一起清空，队伍原地解散；
  • 回调函数——动画全部完成后才执行的函数（animate 的第三个参数； fade/slide 系列是第二个参数），适合“走完这步再干别的”。

队列的细活：fadeTo / delay / queue / finish

队列既然是“一队动画”，就能插队、排队、看队、催队。四件细活，各有各的用处：

方法做什么
fadeTo(时长, 透明度)淡到指定透明度（fadeIn 只能淡到 1、fadeOut 只能淡到 0）
delay(毫秒)在队列里空等一会儿再继续（“停顿”也是一个队列任务）
queue()读出还没有执行的队列（.queue().length 就是排队数）
clearQueue() / finish()清空队列（停在中途）/ 让整个队列一口气全部跑到终点
例 5 · 排队、停顿与催队
先连点几下「淡出 → 停 0.6 秒 → 淡入」，再点「看队列长度」。
练功 · 第六式
  1. 给例 3 加一个“走一个来回”按钮——用 animate 向右 200px，在完成回调里再回到原位。
  2. 把例 2 的 slideToggle 改写成用 animate() 自己实现（提示：height: 'toggle' 这种特殊值 animate 也认识）。
  3. 思考题：为什么 animate({ color: 'red' }) 不会产生颜色渐变的动画？
参考答案 1

回调是 animate 的第三个参数，动画全部完成后才执行—— 在这里安排“之后的事”，顺序就有了保证。

参考答案 2

animate 认识三个特殊值：'show'、'hide'、'toggle'， 会自己计算目标高度。slideToggle 内部正是这么干的。

参考答案 3

动画引擎的活儿，是在两个数值之间算中间值——宽度从 0 到 200，每一帧都能算出一个数。 颜色不是单一数值，没法插值，所以核心 jQuery 不做颜色动画，需要 jQuery.Color 插件。 这也是为什么现成的 fade / slide 都挑透明度、高度这类数值属性下手。

本式小结

  • hide / show / toggle 是显隐三件套，带速度参数即成动画（fast=200 毫秒、slow=600 毫秒、默认 400 毫秒）；
  • fade 系动透明度、slide 系动高度，各有各的“消失感”；
  • animate() 只能动画数值属性，颜色动画需要插件；
  • 动画会排队；stop() / stop(true) 急停，回调函数安排“之后的事”；
  • delay() 是“排队等一会儿”，finish() 让队列一口气跑完，clearQueue() 把队伍解散。
下一式，我们去元素家族里认亲——遍历。