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>
效果:
谢谢观看!
来源: http://www.bubuko.com/infodetail-2944589.html