jQuery 效果 - 淡入淡出

jQuery 效果：淡入淡出 (Fade Effects)

淡入淡出效果通过改变元素的透明度（opacity）来实现视觉上的平滑过渡，而不会改变元素的布局（元素在隐藏时仍占据空间，除非配合其他方法）。这是 jQuery 中最常用的动画效果之一。

一、核心方法详解

1..fadeIn()- 淡入显示

将隐藏的元素从透明（opacity: 0）逐渐变为完全不透明（opacity: 1），并显示出来。

语法：

$(selector).fadeIn(duration,easing,callback);

参数：

• duration(可选): 动画持续时间。
  • 数字：毫秒数（如1000）。
  • 字符串："slow"(600ms),"normal"(400ms),"fast"(200ms)。
• easing(可选): 缓动函数（需 jQuery UI，默认"swing"）。
• callback(可选): 动画完成后的回调函数。

示例：

// 立即淡入（默认 400ms）$("#box").fadeIn();// 1 秒后淡入$("#box").fadeIn(1000);// 使用预设速度$("#box").fadeIn("slow");// 带回调$("#box").fadeIn(1000,function(){console.log("淡入完成！");});

2..fadeOut()- 淡出隐藏

将可见的元素从完全不透明逐渐变为透明（opacity: 0），最后将display设置为none（元素不再占据空间）。

语法：

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

示例：

// 淡出隐藏$("#box").fadeOut();// 2 秒后淡出$("#box").fadeOut(2000);// 带回调$("#box").fadeOut(1500,function(){console.log("淡出完成，元素已隐藏");});

注意：fadeOut结束后，元素的display属性变为none，此时元素不可见且不占空间。再次调用fadeIn可以恢复。

3..fadeToggle()- 淡入淡出切换

根据元素当前状态自动切换：

• 如果元素可见 → 执行fadeOut。
• 如果元素隐藏 → 执行fadeIn。

语法：

$(selector).fadeToggle(duration,easing,callback);

示例：

// 点击按钮切换淡入淡出$("#toggleBtn").click(function(){$("#content").fadeToggle(600);});// 带回调$("#toggleBtn").click(function(){$("#content").fadeToggle(800,function(){console.log("切换完成");});});

4..fadeTo()- 调整透明度

将元素的透明度调整到指定值（0到1之间），不会改变display属性（元素始终占据空间）。

语法：

$(selector).fadeTo(duration,opacity,easing,callback);

参数：

• duration: 必需，持续时间。
• opacity: 必需，目标透明度（0.0完全透明，1.0完全不透明）。

示例：

// 调整为半透明（0.5）$("#box").fadeTo(1000,0.5);// 调整为几乎透明（0.1）$("#box").fadeTo("slow",0.1);// 回调$("#box").fadeTo(1000,0.3,function(){console.log("透明度调整完成");});

区别：fadeOut最终会让元素消失（display: none），而fadeTo(0)只是让元素透明（opacity: 0），元素仍占据布局空间。

二、实战应用场景

1. 图片画廊切换

<divid="gallery"><imgsrc="img1.jpg"class="active"><imgsrc="img2.jpg"style="display:none;"><imgsrc="img3.jpg"style="display:none;"></div><buttonid="prev">上一张</button><buttonid="next">下一张</button><script>letcurrentIndex=0;const$images=$("#gallery img");functionshowImage(index){// 淡出当前图片$images.eq(currentIndex).fadeOut(500);// 更新索引currentIndex=index;// 淡入新图片$images.eq(currentIndex).fadeIn(500);}$("#next").click(function(){letnextIndex=(currentIndex+1)%$images.length;showImage(nextIndex);});$("#prev").click(function(){letprevIndex=(currentIndex-1+$images.length)%$images.length;showImage(prevIndex);});</script>

2. 模态框（Modal）淡入淡出

<buttonid="openModal">打开弹窗</button><divid="modal"style="display:none;position:fixed;top:20%;left:30%;background:#fff;padding:20px;"><h3>模态框</h3><p>这是弹窗内容...</p><buttonid="closeModal">关闭</button></div><script>$("#openModal").click(function(){$("#modal").fadeIn(300);});$("#closeModal").click(function(){$("#modal").fadeOut(300);});// 点击背景关闭$("#modal").click(function(e){if(e.target===this){$(this).fadeOut(300);}});</script>

3. 表单验证错误提示

<inputtype="text"id="username"placeholder="用户名"><spanid="error"style="color:red;display:none;">用户名不能为空</span><buttonid="submit">提交</button><script>$("#submit").click(function(){constval=$("#username").val();if(val===""){// 淡入错误提示$("#error").stop(true,true).fadeIn(400);$("#username").focus();}else{// 淡出错误提示$("#error").fadeOut(400);alert("提交成功");}});// 输入时淡出错误提示$("#username").on("input",function(){if($(this).val()){$("#error").fadeOut(200);}});</script>

4. 加载指示器

// 显示加载动画functionshowLoading(){$("#loading-spinner").fadeIn(200);}// 隐藏加载动画functionhideLoading(){$("#loading-spinner").fadeOut(200);}// 模拟 Ajax 请求$.ajax({url:"api/data",beforeSend:showLoading,complete:hideLoading,success:function(data){console.log(data);}});

三、高级技巧与注意事项

1. 防止动画队列堆积

如果用户快速多次点击按钮，动画会排队执行，导致延迟。使用.stop()解决。

// ❌ 可能导致动画堆积$("#btn").click(function(){$("#box").fadeToggle(500);});// ✅ 使用 stop() 清除队列$("#btn").click(function(){$("#box").stop(true,true).fadeToggle(500);});

• stop(true, true): 第一个true清空队列，第二个true立即跳转到最终状态。

2. 链式调用

淡入淡出方法支持链式调用，可以组合多个效果。

$("#box").fadeOut(500).delay(1000)// 等待 1 秒.fadeIn(500).css("border","1px solid red");// 动画完成后执行

3. 与 CSS 配合

jQuery 动画会覆盖内联样式。如果希望使用 CSS 过渡，可以切换类名。

// CSS.fade-in{opacity:1;transition:opacity0.5s;}.fade-out{opacity:0;transition:opacity0.5s;}// jQuery$("#box").addClass("fade-out").delay(500).removeClass("fade-out").addClass("fade-in");

4. 判断元素状态

// 检查是否可见if($("#box").is(":visible")){console.log("可见");}// 检查是否隐藏if($("#box").is(":hidden")){console.log("隐藏");}

四、淡入淡出 vs 滑动效果

五、速查表

jQuery 的淡入淡出效果简单易用，通过合理的参数设置和回调函数，可以构建出流畅的用户交互体验。在实际开发中，注意使用.stop()防止动画堆积，并根据场景选择合适的方法。