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.9999259840548598book height: 75.03083997714178book opacity: 0.9997733646175807book height: 75.09443140934138.............................
book opacity: 0.7book 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));
            }
         }
      );
});

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

作者：我是上帝可爱多