jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
阿新 • • 發佈：2019-02-06
img nbsp UNC 技術 select fast jquery效果 info 圖片
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>
效果：
fadeToggle()，Toggle()，slideToggle()，fadeTo()
fadeToggle()切換fadeOut()和fadeIn()這兩種模式。當被選元素是隱藏的狀態時，fadeToggle()觸發時會淡入顯示被選元素，此時和fadeIn()一樣；當被選元素是顯示狀態時，fadeToggle()觸發時會淡出隱藏被選元素，此時和fadeOut()一樣。 Toggle()切換show()和hide()這兩種模式。當被選元素是隱藏的狀態時，Toggle()觸發時會顯示被選元素,此時和show()一樣；當被選元素是顯示狀態時，Toggle()觸發時會隱藏被選元素，此時和hide()一樣。 slideToggle()切換slideDown()和slideUp()這兩種模式。當被選元素是隱藏的狀態時，slideToggle()觸發時會滑動顯示被選元素,此時和slideDown()一樣；當被選元素是顯示狀態時，slideToggle()觸發時會滑動隱藏被選元素，此時和slideUp一樣。 fadeTo()要設置被選元素的不透明度（0~1），0的時候是完全透明即隱藏，1的時候是完全不透明即正常的顯示狀態，在0和1之間的話越大越不透明，越小越透明。 fadeToggle()、Toggle()和slideToggle()都是用來隱藏或者顯示被選元素的，只不過隱藏或顯示的效果過程不一樣。fadeToggle()是通過淡入/淡出效果來顯示/隱藏被選元素，Toggle()是直接隱藏或顯示被選元素，slideToggle()是通過滑動效果來隱藏或者顯示被選元素。fadeTo()可以通過不透明度來隱藏和顯示被選元素。jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()