Verwenden von Velocity.js zum Animieren von Fortschrittsbalken

Question

Ich versuche, von der Verwendung der jQuery-Animation auf Velocity umzusteigen, da es auf allen Geräten eine bessere Leistung erzielen soll. Aus der Dokumentation scheint es ziemlich einfach zu sein - ich habe den Quellcode heruntergeladen und ihn in meinen js-Ordner eingefügt und in meiner Funktion sollte ich einfach .animate() auf .velocity() umstellen können. Immer noch nicht funktioniert und ich habe keine Konsolenprotokollfehler. (. Denken Sie auch daran, dass es funktioniert, bevor sie mit jQuery animieren Ich habe auch versucht, die src-Code Download und die Verwendung der CDNs ohne Glück)

Hier ist der Code:

// 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

Es stellt sich heraus den Weg Die jQuery animate-Funktion wurde nicht im richtigen Format für die Geschwindigkeit geschrieben. Velocity verwendet als erstes Argument eine Karte mit CSS-Eigenschaften und -Werten. Ein Optionsobjekt kann optional als zweites Argument übergeben werden. Hier

ist die neue Geschwindigkeitsfunktion:

// 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>"); 
     } 
    }); 

};