6. 效果与动画

这是什么：效果与动画 = jQuery 内置的一组现成动画方法，元素的显示、隐藏、淡入淡出、滑动全都一行搞定。

为什么用：自己写 CSS 动画要折腾关键帧，嫌麻烦就直接切 display 又太生硬。用 jQuery 的现成方法，页面的过渡效果几行代码就出来了。

如何用：本章从 show/hide 讲到 animate() 自定义动画，先做一组「点击切换显示 / 隐藏」的按钮效果。

6.1 基础显示/隐藏（show、hide、toggle）

这三个方法是最基础的效果，用于控制元素的显示和隐藏。

方法	说明
`.show([speed], [callback])`	显示元素
`.hide([speed], [callback])`	隐藏元素
`.toggle([speed], [callback])`	切换显示/隐藏

参数说明：

speed（可选）：动画速度，可选值有 'slow'、'fast'，或数字（毫秒，如 300、1000）
callback（可选）：动画完成后执行的回调函数

示例：

<p id="text">点击按钮切换显示/隐藏</p>
<button id="toggleBtn">切换</button>

<script>
  $(function () {
    $('#toggleBtn').click(function () {
      $('#text').toggle('fast'); // 快速切换
    });
  });
</script>

.hide() 实际上是把元素的 display 设置为 none，.show() 恢复原来的 display 值。

6.2 淡入淡出（fadeIn、fadeOut、fadeToggle、fadeTo）

淡入淡出效果是通过改变元素的 透明度（opacity） 来实现的。

方法	说明
`.fadeIn([speed], [callback])`	淡入（逐渐变为可见）
`.fadeOut([speed], [callback])`	淡出（逐渐变为不可见）
`.fadeToggle([speed], [callback])`	切换淡入/淡出
`.fadeTo(speed, opacity, [callback])`	渐变到指定透明度（opacity 范围 0 ~ 1）

示例：

<div id="box" style="width: 150px; height: 80px; background: #2196F3;"></div>
<button id="fadeToggle">淡入淡出切换</button>
<button id="fadeHalf">半透明</button>

<script>
  $(function () {
    $('#fadeToggle').click(function () {
      $('#box').fadeToggle(400);
    });
    $('#fadeHalf').click(function () {
      $('#box').fadeTo(400, 0.5); // 渐变到 50% 透明度
    });
  });
</script>

6.3 滑动效果（slideDown、slideUp、slideToggle）

滑动效果是通过改变元素的 高度（height） 来实现的，常用于下拉菜单、折叠面板等。

方法	说明
`.slideDown([speed], [callback])`	向下滑动展开
`.slideUp([speed], [callback])`	向上滑动收起
`.slideToggle([speed], [callback])`	切换滑动展开/收起

示例：折叠面板

<style>
  #panel {
    display: none;
    padding: 10px;
    background: #f5f5f5;
    border: 1px solid #ddd;
  }
</style>

<button id="togglePanel">点击展开/收起</button>
<div id="panel">这是折叠的内容区域，点击按钮可以滑动展开或收起。</div>

<script>
  $(function () {
    $('#togglePanel').click(function () {
      $('#panel').slideToggle(300);
    });
  });
</script>

6.4 自定义动画（animate()）

如果内置效果还不够用，jQuery 提供了 .animate() 方法，可以自定义 CSS 属性的动画。

语法：

.animate(properties, [speed], [easing], [callback])

properties：必需，要动画的 CSS 属性（对象形式）。支持大部分数值型 CSS 属性（如 width、height、margin、left、opacity、top 等）。
speed：可选，动画速度（'slow'、'fast' 或毫秒）
easing：可选，动画运动方式，默认是 'swing'（先慢中快后慢），也可以用 'linear'（匀速）。jQuery UI 扩展了更多缓动效果。
callback：可选，动画完成后的回调函数

示例：方块移动+变色

<div id="ball" style="
  width: 50px;
  height: 50px;
  background: #f44336;
  border-radius: 50%;
  position: relative;
  left: 0;
"></div>
<button id="move">开始动画</button>

<script>
  $(function () {
    $('#move').click(function () {
      $('#ball').animate(
        {
          left: '200px',        // 向右移动 200px
          width: '80px',
          height: '80px',
          opacity: 0.7
        },
        1000,                  // 1 秒
        'swing',
        function () {
          alert('动画完成！');
        }
      );
    });
  });
</script>

注意：要对 left、top、right、bottom 做动画，元素必须设置 position: relative、absolute 或 fixed。

链式动画（动画队列）

jQuery 的动画是按队列（Queue） 顺序执行的。我们可以用链式调用连续执行多个动画：

$('#ball')
  .animate({ left: '100px' }, 500)
  .animate({ top: '100px' }, 500)
  .animate({ left: '0px' }, 500)
  .animate({ top: '0px' }, 500);

这些动画会依次执行，形成一个连续的动画序列。

6.5 停止动画（stop）

如果动画还在执行时，用户又触发了新的动画，可能会造成动画队列堆积。可以用 .stop() 方法来停止当前正在执行的动画。

语法：

.stop([clearQueue], [jumpToEnd])

clearQueue（布尔，默认 false）：是否清除后续动画队列
jumpToEnd（布尔，默认 false）：是否立即跳到当前动画的结束状态

常用用法（最安全）：

$(element).stop(true, true); // 停止当前动画，清空队列，并跳到结束状态

示例：鼠标悬停时停止动画

$('#box').hover(
  function () {
    $(this).stop(true, true).slideDown(400);
  },
  function () {
    $(this).stop(true, true).slideUp(400);
  }
);

6.6 回调函数（callback）

动画方法都支持 callback 参数，在动画完全结束后执行某个函数。这在需要按顺序执行操作时特别有用。

$('#text').fadeOut(500, function () {
  $(this).text('淡出完成啦！').fadeIn(500);
});

6.7 小结

本章学习了 jQuery 的动画效果：

基础：show/hide/toggle 控制显示隐藏
淡入淡出：fadeIn/fadeOut/fadeToggle/fadeTo 控制透明度
滑动：slideDown/slideUp/slideToggle 常用于折叠/展开
自定义：animate() 可以操作任意数值型 CSS 属性，实现复杂动画
控制：stop() 避免动画队列堆积，callback 保证动画顺序执行

下一章，我们将学习 jQuery AJAX 基础，实现页面与服务器的数据交互（不刷新页面加载数据）。