jquery 动画

jQuery 动画基础

jQuery 提供了一系列动画方法，允许通过简洁的语法实现元素的动态效果。核心方法包括：

• animate()：自定义CSS属性的动画效果。
• fadeIn()/fadeOut()：淡入淡出效果。
• slideUp()/slideDown()：滑动显示或隐藏元素。

示例代码：淡入效果

$("#element").fadeIn(1000); // 1秒内淡入

使用 animate() 自定义动画

animate() 是 jQuery 最灵活的动画方法，支持对数值类 CSS 属性（如 width、opacity、margin）进行渐变。

语法

$(selector).animate({properties}, duration, easing, callback);

• properties：目标CSS属性的键值对（如 {width: "200px"}）。
• duration：动画时长（毫秒或 "slow"/"fast"）。
• easing：缓动函数（默认 "swing"，可选 "linear"）。
• callback：动画完成后的回调函数。

示例：移动并变色

$("#box").animate({
  left: "300px",
  backgroundColor: "#f00" // 需引入 jQuery UI 支持颜色动画
}, 2000);

动画队列与链式调用

jQuery 动画默认加入队列，按顺序执行。通过链式调用可组合多个动画：

$("#element")
  .slideDown(500)
  .delay(1000) // 延迟1秒
  .fadeOut(500);

停止动画

使用 stop() 中断当前动画：

$("#element").stop(); // 立即停止当前动画
$("#element").stop(true, true); // 清除队列并跳转到最终状态

缓动效果

jQuery 默认提供 "swing"（缓入缓出）和 "linear"（匀速）两种缓动。扩展缓动需引入插件（如 jQuery UI）：

$("#element").animate({left: "200px"}, 1000, "easeOutBounce");

注意事项

• 颜色动画需依赖 jQuery UI 或插件。
• 非数值属性（如 display）需通过回调函数手动修改。
• 频繁触发动画时建议用 stop() 避免队列堆积。

通过结合这些方法，可以实现复杂的交互效果，如轮播图、折叠菜单等。