jquery 动画

jQuery 动画基础

jQuery 提供了一系列动画方法，用于实现元素的动态效果，如淡入淡出、滑动、自定义动画等。

常用动画方法

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

示例代码

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

// 滑动效果  
$("#element").slideDown(500); // 0.5秒内滑下  

// 自定义动画  
$("#element").animate({  
    opacity: 0.5,  
    left: "+=50px"  
}, 1000);  

动画参数与选项

• duration: 动画持续时间（毫秒或字符串如 "slow"、"fast"）。
• easing: 动画速度曲线（默认 "swing"，线性可用 "linear"）。
• complete: 动画完成后的回调函数。

示例

$("#element").fadeOut(500, "linear", function() {  
    console.log("动画完成");  
});  

链式动画

通过链式调用实现多个动画依次执行：

$("#element")  
    .fadeIn(1000)  
    .delay(500)  
    .fadeOut(1000);  

停止动画

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

• stop(): 立即停止当前动画，保留元素状态。
• finish(): 直接跳转到动画最终状态。

示例

$("#element").stop(true, true); // 清除队列并跳转到结束状态  

自定义动画扩展

通过 animate() 结合 CSS 属性实现复杂效果，例如颜色变化需引入插件（如 jquery-color）：

$("#element").animate({  
    backgroundColor: "#ff0000",  
    width: "200px"  
}, 1000);  

注意事项

• 避免滥用动画，影响性能。
• 对 display: none 的元素使用 fadeIn() 或 slideDown() 会自动显示。
• 使用 promise() 可监听多个动画的完成状态：

  $.when($("#el1").fadeOut(), $("#el2").fadeIn()).done(function() {  
      console.log("所有动画完成");  
  });