在网页交互中，元素的突然出现有时会让人感到突兀。fadeIn() 方法解决的问题正是这个——它让隐藏的元素以逐渐增加透明度的方式显现出来，从透明（opacity: 0）过渡到不透明（opacity: 1）。这种渐进的视觉效果能有效降低用户的认知负担，让页面变化显得自然且有层次感。
和 show() 不同，fadeIn() 在动画过程中只改变元素的透明度，不会触及宽度和高度。这意味着被淡入的元素从一开始就占据着它在文档流中的空间，只是肉眼看不见而已。理解这个差异对于选择何时用 fadeIn()、何时用 show() 非常重要。
语法拆解
fadeIn() 提供三种参数组合方式，和前面讨论的 hide() 结构一致：
1. 无参数调用
$(selector).fadeIn();
元素以默认的 400 毫秒时长完成淡入。对于大多数提示信息、标签切换等场景，这个速度是比较适中的起点。
2. 带时长和回调
$(selector).fadeIn(speed, callback);
-
speed：控制淡入过程的时长。同样支持
"slow"（约600毫秒）、"fast"（约200毫秒）或直接传入毫秒数。 -
callback：淡入动画完成后执行的函数。
3. 带缓动函数的完整形式
$(selector).fadeIn(speed, easing, callback);
-
easing：决定透明度的变化速率曲线。默认的
"swing"让淡入过程在中间阶段稍快，首尾稍慢，视觉上比较柔和。如果设为"linear"，透明度会匀速变化，效果会显得机械一些。
多元素顺序淡入的实用示例
官方示例用了三个彩色方块同时淡入来演示不同速度参数，这个思路很适合展示 fadeIn() 的节奏控制能力。我们把它改造成一个更贴合项目开发的场景——通知中心的三条未读消息按顺序逐条呈现。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#loadMsgBtn").click(function(){
// 三条消息分别用不同的速度淡入，营造层次感
$("#msg1").fadeIn("fast"); // 200毫秒，快速出现
$("#msg2").fadeIn("slow"); // 600毫秒，中等节奏
$("#msg3").fadeIn(1500); // 1500毫秒，缓缓浮现
});
});
</script>
<style>
.message {
display: none;
width: 320px;
padding: 12px 16px;
margin-bottom: 8px;
border-radius: 4px;
color: #fff;
font-family: Arial, sans-serif;
}
#msg1 { background-color: #e74c3c; } /* 红色-紧急消息 */
#msg2 { background-color: #2ecc71; } /* 绿色-成功消息 */
#msg3 { background-color: #3498db; } /* 蓝色-普通通知 */
#loadMsgBtn {
padding: 8px 20px;
cursor: pointer;
margin-bottom: 15px;
}
</style>
</head>
<body>
<button id="loadMsgBtn">加载通知消息</button>
<div id="msg1" class="message">
<strong>系统提醒：</strong>服务器将在今晚 22:00 进行维护
</div>
<div id="msg2" class="message">
<strong>操作成功：</strong>您的订单 #20260415 已发货
</div>
<div id="msg3" class="message">
<strong>温馨提示：</strong>您的会员还有 30 天到期，请及时续费
</div>
</body>
</html>
在这个例子中，三条消息同时开始淡入，但因为设定了不同的速度，视觉上产生了错落有致的节奏感。红色紧急消息用 "fast" 最快出现，抓住用户注意力；蓝色普通通知用 1500 毫秒慢慢浮现，显得不那么紧迫。这种通过时长来控制信息层级的做法，在项目里比的淡入更富表现力。
fadeIn() 的使用边界与避坑经验
本节课程知识要点：fadeIn() 只对当前处于隐藏状态的元素生效。如果一个元素已经可见，再次对它调用 fadeIn() 不会有任何变化，也不会触发回调函数。这个特性和 show() 一致。所以在链式操作中，如果元素的状态不确定，可以先用 stop() 清理当前动画，避免动画队列堆积导致的延迟执行。
个人经验分享：刚学 jQuery 时，我曾在一个循环里用 fadeIn() 逐条显示列表项，代码大概是这样：
$("li").each(function(index){
$(this).delay(index * 200).fadeIn(400);
});
效果确实不错，列表项会一条接一条地淡入。但我很快发现一个问题：如果用户在动画还没播完时就切换了页面区域，这些排队的动画仍然会在后台继续执行，等到用户切回来时会看到一堆动画突然加速跑完。解决方式是给容器绑定一个清理逻辑，在切换时调用 $("li").stop(true, true)。这个小教训让我后来养成了一个习惯——凡是涉及动画队列的操作，都要提前考虑用户快速切换或频繁点击的极端情况。
为什么用 fadeIn() 而不是 show()：两者都能让隐藏元素显示出来，但带来的感受不同。show() 同时改变宽高和透明度，元素像是“膨胀”出来的，适合需要强调空间占据感的场景，比如展开一个卡片。fadeIn() 只改变透明度，元素的位置始终不变，适合那些不应该引起布局抖动的场景，比如状态提示、叠加层、图片懒加载的呈现。如果你的页面布局在元素显现时发生了位移，检查一下是不是该用 fadeIn() 却用了 show()。
关于 speed 参数的选择建议：我个人很少使用超过 800 毫秒的淡入时长。太慢的淡入会让页面响应显得迟钝，用户可能在元素还没显现时就开始寻找其他操作目标。200-600 毫秒是比较实用的区间——"fast" 适合轻量级的提示切换，"slow" 适合首次加载的重要模块呈现。如果确实需要一个缓慢呼吸的效果，宁可分阶段用 CSS 动画实现，也不要让 jQuery 的 fadeIn() 承担过重的视觉节奏任务。
