jquery 淡出

jQuery 淡出效果实现方法

jQuery 提供了 fadeOut() 方法来实现元素的淡出效果。该方法会逐渐改变元素的透明度，直到完全隐藏。

基本语法

$(selector).fadeOut(speed, easing, callback);

• speed（可选）：淡出动画的持续时间，可以是毫秒数值或字符串 "slow"、"fast"。
• easing（可选）：动画的缓动效果，默认为 "swing"，也可以使用 "linear"。
• callback（可选）：动画完成后执行的回调函数。

示例代码

简单淡出效果

$("#element").fadeOut();

自定义持续时间和回调

$("#element").fadeOut(1000, function() {
    alert("淡出完成");
});

使用缓动效果

$("#element").fadeOut(1000, "linear");

注意事项

• 淡出后元素会被设置为 display: none，不再占据页面空间。
• 如果需要保留元素的空间，可以使用 fadeTo() 方法将透明度设置为 0，而不隐藏元素。

$("#element").fadeTo(1000, 0);

结合其他方法

淡出效果可以与其他 jQuery 方法链式调用，例如：

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

兼容性

fadeOut() 方法在所有主流浏览器中均支持，包括 IE6+。