• 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>

    效果:

    谢谢观看!

  • 相关阅读:
    机器学习之路--Python
    机器学习之路--Pandas
    机器学习之路--seaborn
    机器学习之路--Matplotlib
    囫囵吞枣——SVG
    囫囵吞枣——XML
    囫囵吞枣——Jquery 笔记
    囫囵吞枣——JavaScript
    囫囵吞枣——CSS3
    囫囵吞枣——CSS笔记
  • 原文地址:https://www.cnblogs.com/pzw23/p/10351484.html
Copyright © 2020-2023  润新知