在N秒內統一更新jQueryUI進度條

Question

給定一個變量N，反映秒數，我希望有一個jQueryUI Progressbar從空到平穩地更新，以反映在該段時間內的完成情況。

換句話說，我想一個function n_sec_progressbar(n) { ... }，顯示一個進度條，並在n秒的進度均勻地從0 value前進到100

我繼續前進，開始setTimeout上擺弄我的前自己，我會很感激任何建議或指向這樣的事情已經完成。

謝謝您的閱讀。

布賴恩

Answer 1

做這樣的函數

(function($) { 
    jQuery.fn.fillProgressBar = function(option){ 
    var settings = jQuery.extend({ 
     fromValue : 0, 
     toValue : 0, 
     interval : 1000 
    },option); 

    function fillProgressBar(element,initialValue,toValue,interval){ 
    // console.log("out "+initialValue); 
     if(initialValue<=toValue){ 
     /* $j(element).progressbar({ 
       value : initialValue++ 
      });*/ 
      $j(element).progressbar("value", initialValue++); 
     // console.log(initialValue); 
      setTimeout(function(){ 
       fillProgressBar(element,initialValue,toValue,interval); 
      }, parseInt(interval/toValue)); 
     // console.log("in "+initialValue); 

     } 
    } 
    fillProgressBar(this,settings.fromValue,settings.toValue,settings.interval); 
    return this; 
};})(jQuery); 

，並撥打電話爲

$j("#progressBar").progressbar({ 
    value:0 }); 

$j("#progressBar").fillProgressBar({toValue : progressBarValue, 
    interval : 1000}); 

Answer 2

我想它會更容易只是用animate()的callback（jQuery的核心API）來編寫自己的自定義進度條。這會給你最好的控制加載動畫。