jQuery 隐藏/显示



  • jQuery效果 - 隐藏和显示

    隐藏,显示,切换,滑动,淡入淡出和动画。
    网页可以响应的所有不同访问者的操作都称为事件。
    单击以显示/隐藏面板
  • jQuery hide()和show()

    语法:
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    可选的speed参数指定隐藏/显示的速度,可以采用以下值:“slow”,“fast”或毫秒。
    可选的回调参数是在hide()show()方法完成后执行的函数(您将在后面的章节中了解有关回调函数的更多信息)。
    使用jQuery,您可以使用hide()show()方法隐藏和显示HTML元素:
       
              <head>
                 <script type="text/javascript" src="jquery.js"></script>
                 <script type="text/javascript">
                 $(document).ready(function(){
                   $("#hide").click(function(){
                     $("p").hide();
                   });
                   
                   $("#show").click(function(){
                     $("p").show();
                   });
                 });
                </script>
              </head>
    
    
    尝试一下
    以下示例使用hide()演示speed参数:
       
              <head>
                 <script type="text/javascript" src="jquery.js"></script>
                 <script type="text/javascript">
                 $(document).ready(function(){
                   $("button").click(function(){
                     $("p").hide(1000);
                   });
                 });
                </script>
              </head>
    
    
    尝试一下
  • jQuery toggle()

    您还可以使用toggle()方法在隐藏和显示元素之间切换。
    语法:$(selector).toggle(speed,callback);
    可选的speed参数可以采用以下值:“normal”,“slow”,“fast”或毫秒。
    可选的回调参数是在toggle()完成后执行的函数。
    显示的元素是隐藏的,隐藏的元素显示如下:
       
              <head>
                 <script type="text/javascript" src="jquery.js"></script>
                 <script type="text/javascript">
                 $(document).ready(function(){
                   $("button").click(function(){
                     $("p").toggle();
                   });
                 });
                </script>
              </head>
    
    
    尝试一下
    有关所有jQuery效果的完整概述,请转到我们的jQuery效果参考手册