jQuery 动画效果

动画是 jQuery 当年的"杀手特性"之一——在那个没有 CSS transition 的年代，jQuery 用纯 JS 帮你实现淡入淡出、滑动、自定义动画，一行代码搞定。即使在 CSS 动画普及的今天，动态属性动画仍是 jQuery 的强项。

1. 显示与隐藏：show / hide / toggle

最基础的三个动画方法。不带参数是瞬间切换，带速度参数就变成动画。它们的本质是改 display 属性。

// 基础:显示 / 隐藏 / 切换
$("#box").hide();              // display: none,瞬间隐藏
$("#box").show();              // 恢复原来的 display,瞬间显示
$("#box").toggle();            // 当前是显示就隐藏,反之显示

// 带速度参数:slow / normal / fast / 毫秒数
$("#box").hide(1000);          // 1 秒内淡出消失
$("#box").show("slow");        // ~600ms 内显示
$("#box").toggle("fast");      // ~200ms 切换

// 带回调:动画结束后执行
$("#box").hide(1000, function () {
  console.log("隐藏完成了");
});

速度参数支持三个字符串（slow 600ms、normal 400ms、fast 200ms）或任意毫秒数。回调在动画完成时触发，常用来串联下一步操作。

2. 淡入淡出：fadeIn / fadeOut / fadeTo

这组方法只改 opacity，比 show/hide 更适合"柔和"的视觉效果。淡出后元素会自动设为 display:none，不影响布局。

// 淡入淡出:只改 opacity,再改 display
$("#box").fadeIn();            // 隐藏 → 显示(淡入)
$("#box").fadeOut();           // 显示 → 隐藏(淡出)
$("#box").fadeToggle();        // 切换

// 淡到指定透明度(不隐藏)
$("#box").fadeTo(1000, 0.5);   // 1 秒淡到 50% 透明

// 速度同样支持 slow/fast/毫秒
$("#box").fadeIn("slow");
$("#box").fadeOut(300, function () {
  console.log("淡出完了");
});

fadeTo 是个被低估的方法——它不会让元素消失，只是淡到指定透明度。做"半透明遮罩"、"高亮当前项、淡化其他"时特别有用。

3. 滑动：slideDown / slideUp / slideToggle

滑动动画改 height，是最适合做折叠菜单、抽屉面板的效果。十年前的网站侧栏、手风琴、下拉菜单几乎全用这套。

// 滑动:改 height,适合折叠菜单
$("#panel").slideDown();        // 展开(从上往下)
$("#panel").slideUp();          // 收起(从下往上)
$("#panel").slideToggle();      // 切换

// 速度 + 回调
$("#panel").slideDown(500, function () {
  console.log("展开了");
});

// 最经典的折叠菜单
$(".menu-header").on("click", function () {
  $(this).next(".menu-body").slideToggle();
});

配合 .next() 或 .children()，可以做出任意层级的折叠菜单。注意滑动动画在元素未设固定高度时表现最佳——已设固定高度的元素动画会显得"卡顿"。

4. 自定义动画：animate

前面三组都是预设效果，真正万能的是 .animate()——你可以让任意数值型 CSS 属性平滑过渡。这是 CSS transition 出现前唯一的"属性动画"方案。

// 自定义动画:.animate(目标属性, 时长, 缓动, 回调)
$("#box").animate({
  width: "400px",
  height: "200px",
  marginLeft: "50px",   // 注意:CSS 的 margin-left 在这里用连字符或驼峰都行
  opacity: 0.5,
}, 1000);

// 缓动函数:默认 "swing"(慢-快-慢),可设 "linear"(匀速)
$("#box").animate({ left: "+=200" }, 1000, "linear");

// 链式排队:多个动画自动排队执行
$("#box")
  .animate({ left: 200 }, 500)
  .animate({ top: 100 }, 500)
  .animate({ left: 0 }, 500)
  .animate({ top: 0 }, 500);  // 走一个方形回到原点

// 回调
$("#box").animate({ width: 500 }, {
  duration: 1000,
  easing: "linear",
  complete: function () { console.log("动画完了"); },
  step: function (now) { /* 每一帧调用 */ },
});

// 限制:animate 只能动画"数值型"属性
// 不能动画 background-image 切换、transform 矩阵(老 jQuery 不支持)
// 现代项目要用 transform 动画,推荐 jQuery 3 + jquery-color 插件

几个要点：动画属性值必须是数值（数字或带单位的字符串）；+= / -= 表示相对当前值变化；多个 animate 链式调用会自动排队（这是 jQuery 的"动画队列"机制）。

注意 animate 的局限：它只能动画数值属性（width/height/left/opacity/margin 等），不能动画颜色（要装 jquery-color 插件）和 transform 矩阵。新项目做复杂动画，CSS transition + transform 性能更好。

5. 停止、延迟、清空队列

实际项目中常遇到动画累积问题：用户快速来回操作，动画队列堆了几十个，按钮松开后页面还在动半天。解法是 .stop()。

// 停止当前动画
$("#box").stop();              // 立即停止当前动画,停在当前位置
$("#box").stop(true);          // true = 清空队列,后续排队的也取消
$("#box").stop(true, true);    // 第二个 true = 直接跳到当前动画的终点

// finish:清空所有队列,把所有动画跳到终点
$("#box").finish();

// delay:在队列里插入等待
$("#box")
  .fadeOut(500)
  .delay(1000)         // 等待 1 秒
  .fadeIn(500);

// 防止"动画累积"的经典写法
// 场景:用户疯狂移入移出 mouseenter,动画排队堆 100 次
$("#box").on("mouseenter", function () {
  $(this).stop(true).animate({ width: 300 });  // 先 stop 再 animate
});

记住这条规则：动画前先 .stop(true)。这是 jQuery 动画的"防御性编程"——能避免绝大多数累积问题。delay() 则是用来在队列中插入等待时间，做"渐次出现"效果时常用。

6. jQuery 动画 vs CSS 动画

现代项目该用哪个？简单对比一下：

性能：CSS transition 由浏览器原生加速（GPU），性能远超 JS 动画。能用 CSS 就用 CSS。
灵活度：jQuery animate 能动态改目标、随时停止、串联复杂队列——这些 CSS 难做。
兼容性：IE9 以下不支持 CSS transition，老项目仍需 jQuery。
维护：CSS 动画在样式表里集中管理，jQuery 动画散在 JS 代码里——前者更易维护。

结论：新项目优先 CSS transition + animation，老项目维护或需要复杂序列动画时再用 jQuery。千万别用 jQuery 做高频动画（如游戏循环、滚动视差），性能完全跟不上。

小结

jQuery 动画的"四组一招"：show/hide/toggle、fadeIn/fadeOut/fadeTo、slideDown/slideUp/slideToggle、animate 自定义、外加 stop 防累积。会这五样，应付绝大多数老 jQuery 代码绰绰有余。下一篇我们看 jQuery 的另一招牌——AJAX 请求。

← 上一篇 jQuery DOM 操作

下一篇 jQuery AJAX →

✈️💬