jquery淡出

jQuery 淡出效果实现方法

使用 jQuery 的 fadeOut() 方法可以轻松实现元素的淡出效果。该方法通过逐渐调整元素的不透明度来实现淡出动画，最终将元素的 display 属性设置为 none。

基本语法：

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

参数说明：

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

示例代码

// 基础淡出效果
$("#element").fadeOut();

// 指定持续时间为 1 秒
$("#element").fadeOut(1000);

// 使用回调函数
$("#element").fadeOut("slow", function() {
    console.log("淡出动画完成");
});

高级用法

结合其他动画效果：

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

使用缓动函数：

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

注意事项

• 淡出动画会修改元素的 display 属性为 none，元素将不再占据页面空间。
• 如果需要保留元素的空间，可以考虑使用 fadeTo() 方法将不透明度调整为 0 而不隐藏元素。

// 保留元素空间
$("#element").fadeTo(1000, 0);