jQuery的動畫的進度條的百分比比杆（步驟）更快

Question

我試圖編寫一個（假）動畫jQuery的進度條，我使用的功能動畫（），這是我的代碼：

$("#progress_bar").animate({width:"100%"},{ 
        step: function(now, fx) { 
        var data = Math.round(now); 
        $("#percent").html(data+' % ')},duration:8000}//function pourcentages 


       ); //animate 

問題是關於百分比，它比酒吧（這是一個div從0到100％寬度）多得多，櫃檯完成之前比酒吧達到100％。有人可以幫我解決這個問題嗎？

Answer 1

即使您以％命名您的指令，它也可能以像素爲單位進行動畫處理。

您收到的輸出很可能是某個給定點處元素的像素寬度。

嘗試這樣：

$("#progress_bar").animate({width:"100%"},{ 
    step: function(now, fx) { 
    var max_width = [...]; 
    var actual_width = Math.round(now); 
    var data_perc = (actual_width/max_width) * 100; 

    $("#percent").html(data_perc+' % ')},duration:8000}//function pourcentages 


); //animate 

替換[..]與你的酒吧的最大寬度（你的酒吧包裝的可能的寬度）。

例：

var max_width = $('#bar_wrapper').width(); 

Answer 2

我複製你的代碼，它工作正常。

See fiddle here

你動畫只有一個屬性？如果沒有，你可能想使用這樣的事：

$("#progress_bar").animate({width:"100%"},{ 
    step: function(now, fx) { 
     if(fx.prop == 'width') { //If you animate more than 1 property 
      var data = Math.round(now); 
      $("#percent").html(data+' % '); 
     } 
    },duration:8000}//function pourcentages 
); //animate 

檢查similar post更多信息