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 應該都不會出現在屬性到達指定值之前就停下的情況。