效果附上：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fadein()方法</title><style>//下面的例子演示了带有不同参数的 fadeIn() 方法：div{width: 100px;height: 100px;display: none;text-align: center;}#div1{background-color: green;}#div2{background-color: yellow;}#div3{background-color: red;}</style></head><body><script src="../jquery-3.6.0.js"></script><button>按钮淡入p1</button><div id="div1">green</div><div id="div2">yellow</div><div id="div3">red</div><script>$(document).ready(function(){$('button').click(function(){$('#div1').fadeIn(1000);$('#div2').fadeIn();$('#div3').fadeIn();})})</script></body></html>
jQueryfadein()方法
隐藏该元素。
语法：$(selector).fadeIn(speed,callback);
和之前的jQuery 效果-隐藏/显示的用法一致
jQuery 效果- 隐藏和显示_nanchen的博客-CSDN博客
注意：
fadeIn() 用于淡入已隐藏的元素。
语法:$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>fadein()方法</title><style>div{width: 100px;height: 100px;display: none;text-align: center;}#div1{background-color: green;}#div2{background-color: yellow;}#div3{background-color: red;}</style></head><body><!-- fadeIn() 用于淡入已隐藏的元素。语法:$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。下面的例子演示了带有不同参数的 fadeIn() 方法： --><script src="../jquery-3.6.0.js"></script><button>按钮淡入p1</button><div id="div1">green</div><div id="div2">yellow</div><div id="div3">red</div><script>$(document).ready(function(){$('button').click(function(){$('#div1').fadeIn(1000);$('#div2').fadeIn();$('#div3').fadeIn();})})</script></body></html>
jQuery fadeOut() 方法
淡出
语法：$(selector).fadeOut(speed,callback);
代码就不演示了，直接引入淡出方法即可
效果如图：
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在前两种方法中进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法：$(selector).fadeToggle(speed,callback);
其效果与第一张图片和第一张代码一致
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:$(selector).fadeTo(speed,opacity,callback);
效果：
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;}#div1 {background-color: blue;}#div2 {background-color: blue;}#div3 {background-color: blue;}</style></head><body><button>调整盒子不透明度</button><div id="div1">1</div><div id="div2">2</div><div id="div3">3</div><script src="../jquery-3.6.0.js"></script><script>// 语法$(selector).fadeTo(speed,opacity,callback);// 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。$('button').click(function () {$('#div1').fadeTo('show', 0.1); //透明度只能在0~1之间$('#div2').fadeTo('show', 0.4);$('#div3').fadeTo('show', 0.8);})</script></body></html>
总结：
一、fadeIn() fadeOut() fadeToggle() fadeTo() 大小写不能变。
二、fadeTo() 没有默认参数，必须加上 slow/fast/Time 。
