效果附上：
代码如下：
<!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>
jQuery fadein()方法
隐藏该元素。
语法：$(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 。
