jquery animate用法

最近看过一段实现天猫购物车动画效果的代码，如果说是一道数学题，也就是高一数学的水准，但是把它放进程序里面写出来可就费劲了。当然今天不去研究那个复杂的东西，我们就回顾一下并彻底弄清jquery animate动画的原理。

1 基本用法

$('...').animate(prop,speed,easing,callback)

• prop 类似css3属性参数，是一个js对象。
• speed 动画时间
• easing 缓动函数，默认是swing
• callback 动画结束的回调函数

废话不多说，直接上代码

<div id="clickme">
    Click here
</div>
<img id="book" src="js/qwe.png" alt="" width="100" height="123"
     style="position: relative; left: 10px;">

( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

我们可以看到prop就是一个css属性的对象，不写easing默认是swing效果，当然你可以在5000后面写个linear，表示匀速效果。

注意height:'toggle'就是高度变为0，然后又会变回来。

我们可以将上面代码稍稍改一下：

var flag = true;
    $( "#clickme" ).click(function() {
        if(!$('#book').is(':animated')){
            $( "#book" ).animate({
                opacity: flag ? 0.25 : 1,
                left: "+=50",
                height: "toggle"
            }, 1000,function() {
                flag = !flag
            });
        }
  });

is(':animated')判断是否处于运动，如果是就不会执行此次动画。

2 step function

这个用的比较少，知道就可以了

$('#book').animate({
            opacity: .7,
            height: '200px'
        },
        {
            step: function(now, fx) {
                var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                $('body').append('<div>' + data + '</div>');
            }
        });

book opacity: 0.9999259840548598
book height: 75.03083997714178
book opacity: 0.9997733646175807
book height: 75.09443140934138
.............................
book opacity: 0.7
book height: 200

.animate()提供了一个step选项- 每步动画执行后调用的回调函数。

3 easing使用

这个是比较有用的，在开发中会碰到。

$('#clickme').click(function() {
        $('#book').animate({
            width: ['toggle', 'swing'],
            height: ['toggle', 'linear'],
            opacity: 'toggle'
        }, 5000, function() {
            $(this).after('<div>Animation complete.</div>');
        });
    });

如上代码，我们可以看到，可以设置不同属性渐变的参数，width的效果是swing，height的是linear，而opacity是后面写的linear。
jquery默认只支持swing和linear，我们如何使用其他缓动呢？

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
在jq之后引入这个js

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

注意这种写法，duration，easing和callback都写在了个对象里。
我们可以发现，所有的动画属性都是在同时进行，并且都是花费相同的时间，如果我想分开执行呢？

4 animate使用差异

 <button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function(){
  $( "#block2" ).animate({ width: "90%" }, 1000 )
     .animate({ fontSize: "24px" }, 1000 )
     .animate({ borderLeftWidth: "15px" }, 1000 );
});
//  这种情况是上一个执行完了才下一个

如果对上面2种写法都清楚的话，就没问题了。解释一下吧：

• queue等于false，表示该元素下一个animate和上一个是一起执行的，就是说宽度变为90%和字体变为24px是一起执行的，所花时间不同而已。

下面给个例子结束了

<div class="rectangle">
   <div class="square-small"></div>
</div>
<button id="animation-button">Run!</button>
<span id="percentage">0</span>%

$('#animation-button').click(function() {
   var $button = $(this);

   $('.rectangle')
      .find('.square-small')
      .animate({
            left: 280
         },
         {
            duration: 2000,
            start: function() {
               $button.prop('disabled', true);
            },
            complete: function() {
               $button.prop('disabled', false);
            },
            progress: function(animation, progress) {
               $('#percentage').text(Math.round(progress * 100));
            }
         }
      );
});

大家可以自己去试一下哟。。。