首页 > Web开发 > 详细

jQuery效果------隐藏hide()/显示show()

时间:2019-02-04 10:34:07      阅读:184      评论:0      收藏:0      [点我收藏+]

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()

原文:https://www.cnblogs.com/pzw23/p/10351484.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!