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：动画完成后的回调函数。
实际应用场景
- 图片轮播中的平滑过渡
- 表单错误提示的渐显效果
- 页面元素动态加载时的渐进展示
注意事项：
- 对
display: none的元素使用fadeIn()会将其改为display: block（或原始显示类型）。 - 动画队列可通过
stop(true)清除积累效果。 - 在移动端需注意性能影响，可考虑CSS3动画替代方案。
