jQuery 动画

jQuery 特效 - 使用 animate() 进行自定义动画

jQuery 的 animate() 方法允许您通过在指定持续时间内逐渐改变 CSS 属性来创建自定义动画。

jQuery animate() 方法

语法：

$(selector).animate(properties, [duration], [easing], [complete]);

参数 (Parameters)：

properties: (必需) 一个对象，包含要动画化的 CSS 属性及其目标值。属性名必须使用驼峰式命名 (camelCase)，例如 marginLeft, fontSize。
duration: (可选) 指定动画速度。可以是毫秒数 (例如 1000)，或字符串 'slow' (600ms) 或 'fast' (200ms)。默认值为 400。
easing: (可选) 一个字符串，指示用于过渡的缓动函数 (easing function)（动画随时间推进的方式）。默认值为 'swing'。如需 'linear' 和 'swing' 之外的更多选项，需要 jQuery UI 或插件。
complete: (可选) 一个回调函数 (callback function)，在元素的动画完成后执行。

示例：动画化 left 属性：

// 假设该 div 元素的 position 样式为 relative 或 absolute
$("#moveRightBtn").click(function() {
  $("#myBox").animate({
    left: '300px' // left 属性的目标值
  }, 1000); // 持续时间：1000ms (1 秒)
});

重要提示：要对定位属性（如 top、left、bottom、right）进行动画处理，元素的 CSS position 值必须是 relative、absolute 或 fixed。静态元素（默认为 static）不能进行定位。

动画化多个属性

通过将多个 CSS 属性包含在 properties 对象中，您可以同时对它们进行动画处理。

示例：动画化位置、不透明度和尺寸：

$("#animateAllBtn").click(function() {
  $("#myBox").animate({
    left: '250px',
    opacity: 0.5,
    height: '200px',
    width: '200px',
    fontSize: '24px' // 多词属性请使用驼峰式命名 (camelCase)
  }, 'slow', function() {
    // 动画完成时的回调函数
    console.log('Animation finished!');
    $(this).css('border', '2px solid green'); // 动画完成后的示例操作
  });
});

关于可动画属性的注意事项：大多数数值型的 CSS 属性都可以进行动画处理（例如尺寸、外边距、内边距、位置、字体大小、不透明度）。核心 jQuery 的 animate() 方法不支持颜色动画，这通常需要插件（如 jQuery UI）或最好使用现代 CSS Transitions/Animations 来处理。

animate() 与 CSS Transitions/Animations 的比较

现代 CSS 为动画提供了强大的替代方案：

CSS Transitions：在状态改变时（例如，鼠标悬停或添加/移除类时），平滑地随时间改变属性值。对于基于状态的变化更为简单。
CSS Animations (@keyframes)：完全在 CSS 中定义复杂的、多步的动画。

CSS 方法的优势：

性能：通常更流畅，因为它们可以由浏览器进行硬件加速。
关注点分离：将表示逻辑（动画）与行为逻辑（JavaScript）分开。
语法更简单（适用于许多常见情况）。

何时使用 jQuery animate()：

复杂的序列动画或基于动态 JavaScript 计算的动画。
需要在特定时间点通过回调进行精细控制。
兼容不完全支持 CSS transitions/animations 的旧浏览器。
当您已经在其他交互中大量使用 jQuery 时。

建议：对于大多数视觉效果，优先使用 CSS Transitions/Animations。当需要 animate() 的特定功能或浏览器兼容性时，再使用 jQuery animate()。

使用相对值

您可以通过在目标值前加上 += 或 -= 来相对于属性的当前值进行动画处理。

示例：增加宽度和高度：

$("#growBoxBtn").click(function() {
  $("#myBox").animate({
    height: '+=50px', // 将高度增加 50px
    width: '+=50px'   // 将宽度增加 50px
  }, 'fast');
});

使用预定义值

对于某些属性，如 height、width 和 opacity，您可以在 animate() 中使用字符串值 'show'、'hide' 或 'toggle'。

示例：通过动画切换高度：

$("#toggleHeightBtn").click(function() {
  $("#myBox").animate({
    height: 'toggle'
  }, 'slow');
});

这实际上是在其当前高度与 0（对于 'hide'）之间，或从 0 到其默认/先前高度（对于 'show'）之间进行动画。它将动画与显示逻辑结合在一起。

动画队列

默认情况下，jQuery 使用一个动画队列（即 ‘fx’ 队列）。当您连续对同一个元素调用多个 animate() 方法（或其他效果方法，如 slideDown、fadeIn）时，它们会被添加到队列中，并按顺序一个接一个地执行。

示例：序列动画：

$("#sequentialAnimBtn").click(function() {
  const $box = $("#myBox");

  // 动画 1：向右移动
  $box.animate({ left: '+=100px' }, 'slow');

  // 动画 2：增大尺寸（在移动完成后开始）
  $box.animate({ height: '+=50px', width: '+=50px' }, 'slow');

  // 动画 3：轻微淡入/淡出（在尺寸增大完成后开始）
  $box.animate({ opacity: 0.7 }, 'fast');

  // 动画 4：移回原位（在淡入/淡出完成后开始）
  $box.animate({ left: '-=100px' }, 'slow');
});

这种队列行为使得创建复杂的动画序列变得容易。

jQuery 特效参考

要获取所有 jQuery 特效的完整概述，包括 animate() 选项和其他动画方法，请访问官方 jQuery 特效文档。