前段时间在使用jquery的animate() 函数时候用到alternate方式。主要是要让数字自增到指定大小，且能看见数字增加过程。
一般使用如下方式：
我要评论 1 function autoplusanimate(obj){
2 if(obj== null)
3 return;
4
5 $({counter: 0}).animate({ counter: obj.attr('num') }, {
6 duration: 1200,
7 easing: 'swing',
8 step: function () {
9 obj.html(this.counter.tofixed(2)+'%');11 }
12
13 });
14 }
嗯...能运行，不报错，但是问题来了。多刷新试试，会发现有时动画过程会在未达到指定数字的时候就停下了。可想而知，不管是数字动画还是其他动画都可能出现未到达目标前就停止了。
然后找到这个，jquery api中文文档
光从字面上看我确实看不出是什么原因，但是肯定是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中文文档后才知道
使用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 应该都不会出现在属性到达指定值之前就停下的情况。
如对本文有疑问， 点击进行留言回复！！
网友评论