2-1 jQuery中下拉动画slideDown
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery中下拉动画slideDown

对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideDown方法

.slideDown()：用滑动动画显示一个匹配元素

.slideDown()方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

常见的操作，提供一个动画是时间，然后传递一个回调，用于知道动画是什么时候结束

.slideDown( [duration ] [, complete ] )

持续时间（duration）是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400 毫秒的延时。

具体使用：

$("ele").slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作....
});

注意事项：

 

 

 

任务

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: 100%;
  11.         height: 50px;
  12.         padding: 5px;
  13.         margin: 5px;
  14.         float: left;
  15.         border: 1px solid #ccc;
  16.         display: none;
  17.     }
  18.     .left div {
  19.         background: #bbffaa;
  20.     }
  21.  
  22.     .right div {
  23.         background: yellow;
  24.     }
  25.     </style>
  26.     <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
  27. </head>
  28.  
  29. <body>
  30.     <h2>slideDown</h2>
  31.     <div class="left">
  32.         <h4>测试一</h4>
  33.         <div id="a1">hide-show</div>
  34.         <button>点击slideDown显示动画</button>
  35.     </div>
  36.         <script type="text/javascript">
  37.         //点击button
  38.         //执行3秒隐藏
  39.         //执行3秒显示
  40.         $("button:first").click(function() {
  41.             $("#a1").slideDown(3000)
  42.         });
  43.         </script>
  44.     <div class="right">
  45.         <h4>测试二</h4>
  46.         <div id="a2">hide-show</div>
  47.         <button>点击slideDown执行回调</button>
  48.     </div>
  49.         <script type="text/javascript">
  50.         //点击button
  51.         //执行3秒隐藏
  52.         //执行3秒显示
  53.         $("button:last").click(function() {
  54.             $("#a2").slideDown(3000,function(){
  55.                 alert('动画执行结束')
  56.             })
  57.         });
  58.         </script>
  59. </body>
  60.  
  61.  
  62. </html>
  63.  
下一节