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("所有动画完成"); });
