jQuery 效果方法

jQuery 用一组封装好的效果方法实现显示、隐藏、淡入淡出、滑动与自定义动画，几行代码就能让页面"动起来"。多数效果方法都支持速度参数和完成后的回调函数。

显示与隐藏

hide() / show() 直接显隐，toggle() 在两者间切换；传入速度后宽、高、透明度会一起渐变：

$("#box").hide();                 // 立即隐藏
$("#box").show(800);              // 0.8 秒内逐渐显示
$("#box").toggle("slow");         // 慢速切换隐藏/显示
$("#box").toggle(1000, function () {
  console.log("切换完成");          // 输出：切换完成
});

淡入淡出

fade 系列只改变透明度，常用于提示条、弹层：

$("#box").fadeIn(1000);        // 1 秒内淡入
$("#box").fadeOut(500);        // 半秒淡出
$("#box").fadeToggle();        // 淡入淡出切换
$("#box").fadeTo(600, 0.3);    // 0.6 秒内把透明度调到 30%
// 效果：元素逐渐显现或隐去，不改变宽高

滑动

slide 系列通过改变高度形成"拉窗帘"效果，适合折叠菜单、下拉面板：

$("#panel").slideDown(500);    // 向下展开
$("#panel").slideUp(500);      // 向上收起
$("#panel").slideToggle();     // 展开/收起切换
// 效果：面板高度从 0 平滑变化到内容高度

自定义动画 animate()

animate() 可以动画任意数值型 CSS 属性，语法： animate({ 属性: 目标值 }, speed, easing, callback)

$("#box").animate(
  { left: "200px", opacity: 0.5 }, // 移动并变半透明
  1000,
  function () { console.log("动画完成"); } // 输出：动画完成
);
// 效果：元素 1 秒内向右移动 200px 并逐渐变淡

注意：颜色、transform 等非数值属性无法直接用 animate() 动画，需要插件或 CSS3 过渡配合。

停止动画与队列

多个动画会按顺序排队执行，可用 stop() 与 delay() 控制：

$("#box").stop();             // 停止当前正在执行的动画
$("#box").stop(true, true);   // 参数1 清空队列；参数2 直接跳到终点
$("#box").delay(500).fadeIn(); // 先等 0.5 秒再开始淡入
// 效果：停止后元素停在半路，或立即完成，或延迟后继续

小结：显隐、淡入淡出、滑动与 animate() 组成了 jQuery 动画体系，速度与回调参数让动画可控可感知。想精细管理动画排队，就配合 stop()、delay() 使用。