在今天之前，我对jQuery的中的animate()方法还停留在最常见的用法，查了一下手册，发现在1.8的时候增加了几个比较有用的回调函数，比如progress（A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties.）就是说每个动画元素无论你有多少个动画属性，每一步动画后只会回调一个函数，即元素在运动的过程中，你可以通过这个回调函数，执行一些代码，太有用了，这个属性。其他的属性就很常规了。下面一起看看。
格式和参数
animate的有两种不同的调用方式，大部分参数是可选的。在今天之前，我只知道第一种调用方式，看来这个jQuery API还是看官网最合适。
animate(properties[, duration][, easing][, callback])animate(properties[, options])
关于上面这些参数，有很多可以说的。我们比较熟悉的第一个格式自然不用说了。
- properties:动画属性
- duration: (默认:
400)动画运行时间 - easing:(默认:
swing)动画的运行方式 - callback:动画完成之后的回调函数
下面关键说说第二个格式里的options有哪些选项：
- duration：同上
- easing:同上
- queue： (default:
true) A Boolean indicating whether to place the animation in the effects queue.（是否将动画放置在效果队列中） - specialEasing：由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增)
- step：Function( Number now, Tween tween ) 每个动画元素的每个动画属性将调用的函数。
- progress： Function( Promise animation, Number progress, Number remainingMs ) 每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。
- complete：在动画完成时执行的函数。
- done：在动画完成时执行的函数。
- fail：动画失败完成时执行的函数。
- always：在动画完成或未完成情况下停止时执行的函数。
案例使用
单一动画属性
<div class="rectangle">
<div class="square-small"></div>
</div>.rectangle
{
width: 300px;
height: 20px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}
.square-small
{
display: block;
width: 20px;
height: 20px;
position: absolute;
background-color: red;
}$('.rectangle')
.find('.square-small')
.animate({
left: 280
}, 'slow');多个属性动画
<div class="square-big">
<div class="square-small"></div>
</div>.square-big
{
width: 300px;
height: 300px;
display: block;
position: relative;
border: 1px solid black;
margin: 20px 0;
}(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.square-big')
.find('.square-small')
.animate({
left: 280,
top: 280
},
options
)
.animate({
left: 0,
},
options
)
.animate({
left: 280,
top: 0,
},
options
)
.animate({
left: 0,
},
$.extend(true, {}, options, {
complete: function() {
animation();
}
})
);
})();第二种格式
演示start、complete和progress
<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));
}
}
);
});