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;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>
效果:
谢谢观看!