最近看过一段实现天猫购物车动画效果的代码，如果说是一道数学题，也就是高一数学的水准，但是把它放进程序里面写出来可就费劲了。当然今天不去研究那个复杂的东西，我们就回顾一下并彻底弄清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));
}
}
);
});
大家可以自己去试一下哟。。。
