最近看过一段实现天猫购物车动画效果的代码，如果说是一道数学题，也就是高一数学的水准，但是把它放进程序里面写出来可就费劲了。当然今天不去研究那个复杂的东西，我们就回顾一下并彻底弄清jquery animate动画的原理。
1 基本用法
$('...').animate(prop,speed,easing,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种写法都清楚的话，就没问题了。解释一下吧：
下面给个例子结束了
<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));
}
}
);
});大家可以自己去试一下哟。
作者：我是上帝可爱多
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
