jQuery效果------隱藏hide()/顯示show()
阿新 • • 發佈：2019-02-04
color hide 函數名 all tor -- text borde txt
hide()和show()
hide():隱藏文本。
show():顯示文本。
語法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed參數是隱藏/顯示的速度，可以是“slow”、“fast”或者毫秒數；callback參數是隱藏或顯示完成後所執行的函數名稱。
<html> <head> <script src="./jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button#a").mousedown(function(){ $("button#a").css("color","red");//按下這個按鈕變紅色 $("button#a").mouseup(function(){//放松這個按鈕變黑色 $("button#a").css("color","black"); }); $(".txt").hide(); }); $("button#b").mousedown(function(){ $("button#b").css("color","red");//按下這個按鈕變紅色 $("button#b").mouseup(function(){//放松這個按鈕變黑色 $("button#b").css("color","black"); }); $(".txt").show(); }); $("button#c").mousedown(function(){ $("button#c").css("color","red");//按下這個按鈕變紅色 $("button#c").mouseup(function(){//放松這個按鈕變黑色 $("button#c").css("color","black"); }); $(".txt").hide(3000,function(){ $(".txt").show(3000); }); }); }); </script> </head> <body> <div style="boder:1px solid;border-color:red;width:200px;height:100px;"> <p class="txt">大家好</p> <p class="txt">很高興見到你們</p> </div> <button id="a">點擊隱藏</button> <button id="b">點擊顯示</button> <button id="c">點擊隱藏然後顯示</button> </body> </html>
效果：
謝謝觀看！
jQuery效果------隱藏hide()/顯示show()