jquery淡入淡出

jQuery淡入淡出效果实现方法

fadeIn()和fadeOut()方法
通过fadeIn()实现元素淡入显示，fadeOut()实现淡出隐藏。两者均可设置持续时间（毫秒）和回调函数。
示例代码：

// 淡入效果，持续600毫秒
$("#element").fadeIn(600);

// 淡出效果，完成后触发回调
$("#element").fadeOut(400, function() {
    console.log("淡出完成");
});

fadeToggle()方法
根据当前状态自动切换淡入/淡出效果，简化代码逻辑。
示例代码：

// 切换显示/隐藏状态，持续500毫秒
$("#toggleBtn").click(function() {
    $("#box").fadeToggle(500);
});

fadeTo()方法
调整元素透明度至指定值（0-1），支持自定义持续时间和回调。
示例代码：

// 半透明效果（0.5），持续300毫秒
$("#element").fadeTo(300, 0.5);

参数说明

• duration：动画时长（毫秒），可选"slow"(600ms)、"fast"(200ms)或数值。
• easing：过渡效果（默认"swing"，线性为"linear"）。
• complete：动画完成后的回调函数。

实际应用场景

• 图片轮播中的平滑过渡
• 表单错误提示的渐显效果
• 页面元素动态加载时的渐进展示

注意事项：

1. 对display: none的元素使用fadeIn()会将其改为display: block（或原始显示类型）。
2. 动画队列可通过stop(true)清除积累效果。
3. 在移动端需注意性能影响，可考虑CSS3动画替代方案。