Velocity.js를 사용하여 진행 막대 애니메이션하기

Question

jQuery 애니메이션을 Velocity로 전환하려고합니다. 기기간에 더 나은 성능이 있어야하기 때문입니다. 설명서에서 그것은 꽤 쉽게 할 수있는 것 같아요 - 나는 소스 코드를 다운로드하여 내 js 폴더에 추가하고 내 기능에서 .animate()를 .velocity()로 전환 할 수 있어야합니다. 아직도 작동하지 않고 콘솔 로그 오류가 없습니다.

// 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를 애니메이션으로 이전 일 것을 명심 나는 또한 SRC 코드를 다운로드하고 행운과 CDN 서비스를 사용하여 시도했다) jQuery 애니메이션 기능이 속도에 맞는 형식이 아니 었습니다. Velocity는 첫 번째 인수로 CSS 속성 및 값의지도를 사용합니다. options 객체는 선택적으로 두 번째 인수로 전달 될 수 있습니다.

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

}; 

: 여기

는 새로운 속도 기능입니다