标签：css fun bsp out color city 动效 black min
<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>
效果：
jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
标签：css fun bsp out color city 动效 black min
原文地址：https://www.cnblogs.com/pzw23/p/10352946.html
