jquery animate() Alternate 语法

前段时间在使用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
  type: function( number now, tween tween )
  每个动画元素的每个动画属性将调用的函数。这个函数为修改tween 对象提供了一个机会来改变设置中得属性值。
• progress
  type: function( promise animation, number progress, number remainingms )
  每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。

光从字面上看我确实看不出是什么原因，但是肯定是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
  type: function()
  在动画完成时执行的函数。
• done
  type: function( promise animation, boolean jumpedtoend )
  在动画完成时执行的函数。 (他的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 应该都不会出现在属性到达指定值之前就停下的情况。