携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第24天，点击查看活动详情
什么是淡入与淡出
在平时制作ppt的时候我们可能遇见过这种说法，其效果让页面的内容颜色越来越淡，直到消失，下一张 PPT 的显示就从淡变深，这就是淡入淡出的效果了。
fadeOut，fadeIn
在jQuery里面fadeIn 方法可以让元素淡入，它逐渐改变元素的不透明度，让不透明度从 0 逐渐变为 1，从而实现淡入的效果。
fadeOut 则用于让元素淡出，也是通过修改元素的不透明度，让不透明度逐渐从 1 变为 0，从而实现淡出的效果。
其语法格式为：
// 淡入
$().fadeIn(speed, easing, callback);
// 淡出
$().fadeOut(speed, easing, callback);
关于参数
speed：可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、normal、fast 等值easing可选参数，用于设置动画在不同点上元素的速度，其默认值是swing，表示开头和结尾的速度慢，中间的速度快。callback可选参数，是方法执行完成后，执行的一个函数。
实践测试
在vscode里面编写代码，html页为三个div
这里我们把样式变成三个方块并列，并且给各自附上颜色
这是js代码
$(function () {
$("div")
.mouseover(function () {
$(this).fadeOut(500);
})
.mouseout(function () {
$(this).fadeIn(500);
});
});
</script>
结果如下：
- 使用
fadeOut方法实现当鼠标放在元素上，该元素的背景颜色会逐渐变淡直到消失。 - 使用
fadeIn方法实现当鼠标移出元素，背景颜色慢慢变深知道恢复原状。 - 注意：fadeIn 和 fadeOut 方法与 show 和 hide 方法不同，淡入淡出，是颜色渐渐变淡直到消失。
fadeToggle 方法
fadeToggle 方法可以让元素在淡入和淡出动画效果之间进行切换。
其语法格式为：
$().fadeToggle(speed, easing, callback);
fadeToggle 方法参数说明如下：
speed可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、fast 等值。easing可选参数，用于设置动画在不同点上元素的速度，其默认值是swing，表示开头和结尾的速度慢，中间的速度快。callback可选参数，是方法执行完成后，执行的一个函数。
实验
html代码为一张图片和一个按钮
js代码给按钮绑定了一个点击事件，当点击按钮时，页面上的图片就会执行淡入淡出的效果了。
实验结果为：
思考：如果我们不想图片完全消失可以怎么做呢？
fadeTo 方法
fadeTo 方法也是用来实现淡入淡出效果的，它比 fadeToggle 方法多了一个参数 opacity，可以用来控制元素淡出的透明度。
其使用格式为：
$().fadeTo(speed, opacity, callback);
fadeTo 方法的参数说明如下：
speed可选参数，用于设置显示的速度，其值可以是以毫秒为单位的数值，也可以是 slow、fast 等值。opacity表示元素的透明度，它是 fadeTo 方法必须有的一个参数，透明度的取值范围在 0.0 ~ 1.0 之间。callback可选参数，是方法执行完成后，执行的一个函数。
实验代码：
。。。。。。
<script>
$(function () {
$("#fadeTo").click(function () {
$("img").fadeTo(200, 0.2); // 淡出
});
$("#reset").click(function () {
$("img").fadeTo(100, 1.0); // 恢复
});
});
</script>
</head>
<body>
<img src="animal1.jpg" width="300px" height="250px" /><br />
<input type="button" value="淡出" id="fadeTo" />
<input type="button" value="恢复" id="reset" />
</body>
</html>
结果为：
