使用Velocity.js來動畫進度條

Question

我想從使用jQuery動畫切換到Velocity，因爲它應該有更好的性能跨設備。從文檔看起來應該相當容易 - 我已經下載了源代碼並將其添加到我的js文件夾中，並且在我的函數中，我應該能夠將.animate（）切換爲.velocity（）。仍然沒有工作，但我沒有控制檯日誌錯誤。 （在心中也保持它與jQuery動畫工作之前我也試過下載SRC代碼，並使用不帶運氣的CDN）

下面的代碼：

// PROGRESSBAR 
var show_complete_time = 2000; // time to show completed green progressbar and 100% text 
function progressbar(progressbar, time) { 

    var progressbar = $(progressbar); 

    $({someValue: 0}).velocity({someValue: 99}, { 
     duration: time, 
     easing: 'linear', 
     step: function() { 
      var widthNumber = this.someValue; 
      var number = Math.floor(this.someValue+1); 
      progressbar.css({"width": widthNumber + "%"}); 
      progressbar.html("<p>" + number + '%' + "</p>"); 
     }, 
     complete: function(){ // progressbar completed 
      progressbar.css({"width": "100%"}); 
      progressbar.addClass("complete").html("<p>100%</p>"); 
     } 
    }); 
}; 

Answer 1

原來的方式jQuery動畫功能寫入的速度不正確。 Velocity將CSS屬性和值的映射作爲其第一個參數。一個選項對象可以選擇作爲第二個參數傳入。

這是新的速度函數：

// PROGRESSBAR 
var show_complete_time = 2000; // time to show completed green progressbar and 100% text 
function progressbar(progressbar, time) { 

    var progressbar = $(progressbar); 

    progressbar.velocity({"width": "100%"}, { 
     duration: time, 
     easing: "linear", 
     progress: function(elements, c, r, s, t) { 
      var number = Math.floor((c * 100) + 1); 
      progressbar.html("<p>" + number + '%' + "</p>"); 
     }, 
     complete: function(){ // progressbar completed 
      progressbar.addClass("complete").html("<p>100%</p>"); 
     } 
    }); 

};