下一节:

  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效果参考手册。
下一节: