1.隐藏和显示

jQuery hide() 和 show()

  1. <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
  2.     <button id="hide" type="button">隐藏</button>
  3.     <button id="show" type="button">显示</button>
  4.     <script>
  5.         $(document).ready(function () {
  6.                 $("#hide").click(function () {
  7.                     $("p").hide();
  8.                 });
  9.                 $("#show").click(function () {
  10.                     $("p").show();
  11.                 });
  12.             });
  13.     </script>
  15. $("button").click(function(){
  16.   $("p").hide(1000);    //规定隐藏或显示的速度
  17. });

jQuery toggle()

显示被隐藏的元素，并隐藏已显示的元素：

  1. <p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
  2.     <button id="hide" type="button">隐藏</button>
  3.     <button id="show" type="button">显示</button>
  4.     <script>
  5.         $("button").click(function(){
  6.             $("p").toggle();
  7.         })
  8.     </script>

2.淡入淡出

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法
speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
$(selector).fadeIn(speed,callback);

  1. <body>
  2. <p>演示带有不同参数的 fadeToggle() 方法。</p>
  3. <button>点击这里，使三个矩形淡入淡出</button>
  4. <br><br>
  5. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
  6. <br>
  7. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
  8. <br>
  9. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
  10.     <script>
  11.         $("button").click(function(){
  12.             $("#div1").fadeToggle();
  13.            $("#div2").fadeToggle("slow");
  14.             $("#div3").fadeToggle(3000);
  15.         })
  16.     </script>
  17. </body>

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

  1. $(selector).fadeTo(speed,opacity,callback);