显示与隐藏效果

jQuery中用于控制元素显示和隐藏效果的方法如表1所示。

表1 控制元素的显示和隐藏

在表1中，参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）；参数easing表示切换效果，默认效果为swing，还可以使用linear效果；参数fn表示在动画完成时执行的函数。

下面通过代码演示show()、hide()和toggle()的简单使用。

 1  <style>
 2   div { width: 150px; height: 300px; background-color: pink; }
 3  </style>
 4  <button>显示</button>
 5  <button>隐藏</button>
 6  <button>切换</button>
 7  <div></div>
 8  <script>
 9   $("button").eq(0).click(function() {
 10   $("div").show(1000, function() {
 11    alert("已显示");
 12   });
 13  });
 14  $("button").eq(1).click(function() {
 15   $("div").hide(1000, function() {
 16    alert("已隐藏");
 17   });
 18  });
 19  $("button").eq(2).click(function() {
 20   $("div").toggle(1000);
 21  });
 22 </script>

上述代码中，第2行设置div元素的样式宽度150px，高度300px，背景色pink。第4~6行分别定义功能按钮，第7行定义div元素，第9~13行给页面中的第1个按钮绑定单击事件，实现单击“显示”按钮控制div元素的显示，第14~18行给页面中的第2个按钮绑定单击事件，实现单击“隐藏”按钮控制div元素的隐藏，第19~21行给页面中的第3个按钮绑定单击事件，实现单击“切换”按钮控制div元素的显示和隐藏。

在浏览器中运行，效果如图1所示。

图1 案例效果