zoukankan      html  css  js  c++  java
  • jQuery 隐藏效果

    jQuery hide() 和 show()

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#hide").click(function(){
        $("p").hide();
      });
      $("#show").click(function(){
        $("p").show();
      });
    });
    </script>
    </head>
    <body>
    <p>如果你点击“隐藏” 按钮,我将会消失。</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    </body>
    </html>
    

     

    $(selector).hide(speed,callback);

    $(selector).show(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    下面带有 speed 参数的 hide() 方法:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide(1000);
      });
    });
    </script>
    </head>
    <body>
    <button>隐藏</button>
    <p>这是个段落,内容比较少。</p>
    <p>这是另外一个小段落</p>
    </body>
    </html>
    

     

    jQuery toggle()

    通过 jQuery,可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    显示被隐藏的元素,并隐藏已显示的元素:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").toggle();
      });
    });
    </script>
    </head>
    <body>
    
    <button>隐藏/显示</button>
    <p>这是一个文本段落。</p>
    <p>这是另外一个文本段落。</p>
    </body>
    </html>
    

    语法:

    $(selector).toggle(speed,callback);

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

  • 相关阅读:
    学会时刻总结
    JS银行卡号Luhm校验
    来京一年总结
    Linux内核同步机制 第1部分(转)
    Spinlock 简介(转)
    warning: no newline at end of file 解决(转)
    c语言 关键字 extern(转)
    MFC 线程同步(转)
    C语言 全局变量 初始化
    Linux 内核的同步机制,第 2 部分
  • 原文地址:https://www.cnblogs.com/mtime2004/p/9779461.html
Copyright © 2011-2022 走看看