1-3 jQuery中显示元素的show方法
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery中显示元素的show方法

css中有display:none属性，同时也有display:block，所以jQuery同样提供了与hide相反的show方法

方法的使用几乎与hide是一致的，hide是让元素显示到隐藏，show则是相反，让元素从隐藏到显示

看一段代码：使用上一致，结果相反

$('elem').hide(3000).show(3000)

让元素执行3秒的隐藏动画，然后执行3秒的显示动画。

show与hide方法是非常常用的，但是一般很少会基于这2个属性执行动画，大多情况下还是直接操作元素的显示与隐藏为主

注意事项：

 

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <style>
  8.     .left div,
  9.     .right div {
  10.         width: 500px;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.     }
  17.  
  18.     .left div {
  19.         background: #bbffaa;
  20.     }
  21.  
  22.     .right div {
  23.         background: yellow;
  24.     }
  25.     </style>
  26.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <h2>hide-show</h2>
  31.     <div class="left">
  32.  
  33.         <div id="a1">hide-show</div>
  34.  
  35.         <button>直接hide-show动画</button>
  36.  
  37.     <script type="text/javascript">
  38.  
  39.     //点击button
  40.     //执行3秒隐藏
  41.     //执行3秒显示
  42.     $("button").click(function() {
  43.         $("#a1").hide(3000).show(3000)
  44.     });
  45.  
  46.     </script>
  47. </body>
  48.  
  49. </html>
  50.  
下一节