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

jQuery中动画animate(下)

animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知

.animate( properties, options )

options参数

其中最关键的一点就是：

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

列出常用的方式：

$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

 

 

 

任务

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.     p {
  9.         color: red;
  10.     }
  11.  
  12.     div {
  13.         width: 200px;
  14.         height: 100px;
  15.         background-color: yellow;
  16.         color: red;
  17.     }
  18.     a{
  19.         display: block
  20.     }
  21.     </style>
  22.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  23. </head>
  24.  
  25. <body>
  26.     <h2>animate(下)</h2>
  27.     <p>慕课网,专注分享</p>
  28.     <div id="aaron">内部动画</div>
  29.     点击观察动画效果：
  30.     <select id="animation">
  31.         <option value="1">动画step动画</option>
  32.         <option value="2">动画progress回调</option>
  33.     </select>
  34.     <a></a>
  35.     <input id="exec" type="button" value="执行动画">
  36.     <script type="text/javascript">
  37.     $("#exec").click(function() {
  38.         var v = $("#animation").val();
  39.         var $aaron = $("#aaron");
  40.         if (v == "1") {
  41.             //观察每一次动画的改变
  42.             $aaron.animate({
  43.                 height: '50'
  44.             }, {
  45.                 duration :2000,
  46.                 //每一个动画都会调用
  47.                 step: function(now, fx) {
  48.                    $aaron.text('高度的改变值:'+now)
  49.                 }
  50.             })
  51.         } else if (v == "2") {
  52.             //观察每一次进度的变化
  53.             $aaron.animate({
  54.                 height: '50'
  55.             }, {
  56.                 duration :2000,
  57.                 //每一步动画完成后调用的一个函数，
  58.                 //无论动画属性有多少，每个动画元素都执行单独的函数
  59.                 progress: function(now, fx) {
  60.                    $aaron.text('进度:'+arguments[1])
  61.                     // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
  62.                     // alert(data)
  63.                 }
  64.             })
  65.         } 
  66.     });
  67.     </script>
  68. </body>
  69.  
  70. </html>
  71.  
下一节