fadeIn(),fadeOut(),fadeToggle(),fadeTo()
fadeIn()-----淡入已经隐藏的元素(把隐藏的被选元素渐渐显示出来)。 语法:$(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长,可以是:"slow"、"fast" 或毫秒。 可选的 callback 参数是 该fadeIn()完成后所执行的函数名称。 fadeOut()----淡出可见的元素(把可见的被选元素渐渐隐藏起来)。 语法:$(selector).fadeOut(speed,callback); speed和callback同上。 fadeToggle()----可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 语法:$(selector).fadeToggle(speed,callback); speed和callback同上。 fadeTo()-----允许渐变为给定的不透明度(值介于 0 与 1 之间)。 语法:$(selector).fadeTo(speed,opacity,callback); speed是必需的,该参数规定效果的时长,可以是:"slow"、"fast" 或毫秒。 opacity是必需的,该 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间),越小越透明,0是完全透明(看不见),1是不透明。 callback同上。<html><head><script src="./jquery-3.3.1.min.js"></script><script>$(document).ready(function(){$("button#d").mousedown(function(){$("button#d").css("color","red");$("p#a").fadeOut("fast");$("p#b").fadeOut("slow");$("p#c").fadeOut(2000);});$("button#d").mouseup(function(){$("button#d").css("color","black");});$("button#e").mousedown(function(){$("button#e").css("color","red");$("p#a").fadeIn("fast");$("p#b").fadeIn("slow");$("p#c").fadeIn(2000);});$("button#e").mouseup(function(){$("button#e").css("color","black");});$("button#f").mousedown(function(){$("button#f").css("color","red");$("p#a").fadeToggle("fast");$("p#b").fadeToggle("slow");$("p#c").fadeToggle(2000);});$("button#f").mouseup(function(){$("button#f").css("color","black");});$("button#g").mousedown(function(){$("button#g").css("color","red");$("p#a").fadeTo("fast",0.8);$("p#b").fadeTo("slow",0.5);$("p#c").fadeTo(2000,0.2);});$("button#g").mouseup(function(){$("button#g").css("color","black");});});</script></head><body><div style="border:1px solid;border-color:red;width:150px;height:216px;"><div style="border:1px solid;border-color:white;height:70px;"><p id="a"style="font-size:20px;color:red;">这是第一段</p></div><div style="border:1px solid;border-color:white;height:70px;"><p id="b"style="font-size:20px;color:blue;">这是第二段</p></div><div style="border:1px solid;border-color:white;height:70px;"><p id="c"style="font-size:20px;color:green;">这是第三段</p></div></div><button id="d">fadeOut</button><br/><button id="e">fadeIn</button><br/><button id="f">fadeToggle</button><br/><button id="g">fadeTo</button><br/></body></html>
效果: