前段时间在使用jQuery的animate() 函数时候用到Alternate方式。主要是要让数字自增到指定大小，且能看见数字增加过程。
一般使用如下方式：
function autoPlusAnimate(obj){
if(obj== null)
return;
$({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
step: function () {
obj.html(this.Counter.toFixed(2)+'%'); }
});
}嗯...能运行，不报错，但是问题来了。多刷新试试，会发现有时动画过程会在未达到指定数字的时候就停下了。可想而知，不管是数字动画还是其他动画都可能出现未到达目标前就停止了。
然后找到这个，jquery api中文文档
- step每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
- progress每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。
光从字面上看我确实看不出是什么原因，但是肯定是step的实现方式的原因，这里没有研究，需要知道的大神讲解一下。但是这里不是还提供另一个方式吗？那就试试
function autoPlusAnimate(obj){
if(obj== null)
return;
$({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
progress: function () {
obj.html(this.Counter.toFixed(2)+'%');
}
});
}经测试发现，使用progress属性实现动画片段的过程没有问题。但是熟悉用jQuery的人在遇到这个问题的时候，应该都会想另一种解决方案，使用回调函数。我们在动画完成的时候使用回调把数据改为目标值就行了啊，完美。但是在没有看jquery api中文文档之前，我看了菜鸟网、和w3school的api，如下：
Alternate 语法
(selector).animate({styles},{options})
参数描述
styles必需。规定产生动画效果的一个或多个 CSS 属性/值（同上）。
options可选。规定动画的额外选项。
可能的值：
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
这里让我一度以为回调函数是使用callback，发现没有任何效果。在看jquery api中文文档后才知道
- completeType: Function()在动画完成时执行的函数。
- done在动画完成时执行的函数。 (他的Promise对象状态已完成)
使用complete、和done来实现回调函数即可
function autoPlusAnimate(obj){
if(obj== null)
return;
$({Counter: 0}).animate({ Counter: obj.attr('num') }, {
duration: 1200,
easing: 'swing',
step: function () {
obj.html(this.Counter.toFixed(2)+'%');
}
,done: function(){
obj.html(obj.attr('num')+'%');
}
});
}使用了done或者complete 后，那么不管你之前使用的step还是progress 应该都不会出现在属性到达指定值之前就停下的情况。