在 jQuery 的动画效果体系中，fadeTo() 是一个相当实用的方法。它不像 fadeOut() 那样直接把元素隐藏，也不像 fadeIn() 那样从无到有，而是把元素的透明度调整到你指定的某个中间值。这种半透明效果在网页交互中经常被用到，比如弹出遮罩层、hover 状态切换、或者突出某个区域时弱化其他元素。
fadeTo() 方法语法
fadeTo() 的调用方式有三种形式，根据是否需要缓动函数和回调来决定：
$(selector).fadeTo(speed, opacity);
$(selector).fadeTo(speed, opacity, callback);
$(selector).fadeTo(speed, opacity, easing, callback);
这四个参数的含义分别是：
-
speed：动画持续时长。可以填字符串 "slow"、"fast"，也可以填具体毫秒数，比如 600 表示 0.6 秒。我在项目里更习惯用毫秒数，因为能精确控制节奏，"slow" 对应 600ms，"fast" 对应 200ms，心里要有数。
-
opacity：目标透明度，取值范围 0 到 1。0 是透明（看不见但元素还在），1 是不透明。注意这里和 CSS 的 opacity 属性用的是同一个逻辑，0.5 就是半透明。
-
easing：缓动函数，默认是 "swing"，可以改成 "linear" 让动画匀速。jQuery 只内置了这两种，如果需要更丰富的缓动效果得引入 jQuery UI 库。
-
callback：动画结束后执行的回调函数，可选。比如你想在淡入完成后弹个提示，就在这里写逻辑。
为什么用 fadeTo() 而不是直接改 CSS？
有人可能会说，我直接 $("#box").css("opacity", 0.3) 也行啊。区别在于，直接改 CSS 是瞬间生效的，没有过渡过程，体验很生硬。fadeTo() 自带动画渐变，能让用户感知到变化的过程，这对于界面交互的流畅性很重要。我曾经在一个后台管理系统的侧边栏切换功能里，用 fadeTo() 配合 easing 参数做相邻区块的视觉权重切换，用户反馈说看着比生硬的隐藏显示舒服很多。
代码示例一：基础用法
下面这个例子展示了点击按钮后，三个不同颜色的方块淡入到各自的透明度：
<!DOCTYPE html>
<html>
<head>
<script src="https://www.ebingou.cn/biancheng/images/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.3);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.5);
});
});
</script>
</head>
<body>
<p>点击按钮查看 fadeTo() 方法在不同透明度下的表现</p>
<button>点击淡入方块</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
三个 div 初始是不透明的，点击按钮后分别变到 0.3、0.4、0.5 的透明度，你会看到红色最淡、蓝色最深，渐变的过程很自然。如果不希望元素一开始就可见，可以提前在 CSS 里设置初始 opacity 值。
代码示例二：带缓动函数和回调
假如你想让动画匀速执行，并且淡入完成后在控制台打印一条信息，可以这样写：
$("#div1").fadeTo(800, 0.25, "linear", function(){
console.log("div1 淡入完成，当前透明度 0.25");
});
这里我把 speed 设为 800 毫秒，easing 用 "linear" 让整个运动过程保持匀速，不会像默认的 "swing" 那样先慢后快再慢。个人建议在做 UI 元素的状态过渡时多用 "linear"，感觉更干脆；而在引导用户注意力的场景（比如弹窗出现）用 "swing" 会更柔和。
代码示例三：hover 效果实现
fadeTo() 也很适合做鼠标悬停效果。比如图片列表里，悬停时让其他图片半透明，突出当前项：
$(".img-item").hover(function(){
$(this).siblings().fadeTo(300, 0.4);
}, function(){
$(this).siblings().fadeTo(300, 1);
});
这种方式比直接操控 CSS 的 :hover 伪类更灵活，因为你可以在淡出的时候加上回调，做一些额外的操作，比如显示遮罩文字什么的。
本节课程知识要点
-
fadeTo() 是 jQuery 中少有的能直接指定目标透明度值的动画方法，fadeIn/fadeOut 本质上是 opacity 在 0 和 1 之间切换，而 fadeTo 可以停在任意中间值。
-
opacity 参数是必填的，和 speed 一样不能省略，省略会报错。
-
如果要让元素从当前透明度淡入到目标透明度，确保元素在 DOM 中是可见的（display 不为 none），否则要先 show() 一下。因为 display:none 的元素 opacity 再高也看不到。
-
easing 参数只能选 "swing" 或 "linear"，想用 easeInOut 之类的效果需要额外引入 jQuery UI 插件。
-
多次快速触发 fadeTo()，jQuery 默认会把动画队列叠加执行，如果不想要队列可以用 .stop() 方法先清除，比如
$("#div1").stop(true, true).fadeTo(400, 0.2)。
关于性能和适用场景
fadeTo() 是通过不断修改元素的 opacity 属性来实现动画的，和 CSS3 的 transition 相比，jQuery 动画是用 JavaScript 定时器驱动的，性能上不如 CSS3 原生动画流畅，尤其是在移动端。不过在需要兼容老旧浏览器（比如 IE8 以下）或者需要动画完成后精确控制逻辑时，jQuery 的方案仍然有存在价值。现在不少项目已经转向 CSS 动画或 requestAnimationFrame 的封装库，但如果你维护的项目还在用 jQuery，fadeTo() 依旧是一个称手的工具方法。
