zoukankan      html  css  js  c++  java
  • jQuery效果------隐藏hide()/显示show()

    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>

    效果:

    谢谢观看!

  • 相关阅读:
    第一次博客作业
    面向对象及软件工程-团队作业4
    面向对象及软件工程-团队作业3
    面向对象及软件工程-团队作业2
    面向对象及软件工程-个人作业2(59)
    面向对象及软件工程-团队作业1
    面向对象及软件工程-个人作业1
    数据结构:第八章学习小结
    数据结构:第七章学习小结
    数据结构:第六章学习小结
  • 原文地址:https://www.cnblogs.com/pzw23/p/10351484.html
Copyright © 2011-2022 走看看