使用jQuery進度條的動畫

我想逐步給進度條設置動畫。當我使用for循環，進度條消失使用jQuery進度條的動畫

<script type="text/javascript"> 
    $(function() { 

     // Set the progressbar's initial value to 76%. 
     $("#progressbar1").progressbar({value:7}); 

     // Set the progressbar's value to 18%. 
     $("#button1").click(function() {    
      $("#progressbar1").progressbar("option", "value", 18);   
     }); 

     // Increment the progressbar's current value by 10%. 
     $("#button2").click(function() { 
      var val = $("#progressbar1").progressbar("option", "value"); 
     }); 

     // Decrement the progressbar's current value by 10%. 
     $("#button3").click(function() { 
      var val = $("#progressbar1").progressbar("option", "value"); 
      $("#progressbar1").progressbar("option", "value", val-10); 
     }); 
    }); 
</script> 


<input id="button2" type="button" value="Progress" />

所以，當我在按鈕2點擊，進度欄逐漸動畫。

如果有人幫我在頁面打開時加載動畫onload()函數請幫助我逐步設置進度條的動畫，並且在打開文件時應該自動加載。

Regards，

Chandru。

來源

2011-02-03 chandru

緩存您

$('#progressbar').animate( { dummy: '100' }, { step: function(now,fx) { // set current value $('#progressbar').progressbar('value', now); } });

編輯jQuery結果集！ `var $ progressbar1 = $（「＃progressbar1」）;`你必須提供一些HTML標記以幫助我們。 – 2011-02-03 12:18:53

好的chandru我知道了一切請按照鏈接http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar – hardik9045 2011-02-03 12:15:53

你可以檢查[本教程]（http ：//www.codeproject.com/KB/progress/JQueryProgressBar.aspx）。 – enam 2011-02-03 12:18:37

到目前爲止還不是最好的方法（實際上更多的是黑客），但也許你可以看看.animate jQuery函數。使用「虛擬」 CSS屬性也可能是這樣的，從0到100的數值動畫的進度：使用jQuery的寬鬆政策功能的一個示例：http://jsfiddle.net/hPGNE/

來源

2011-02-03 12:35:41 cschleiden

$('#progressbar').progressbar(); 

$('#button2').click(function(){ 
    makeProgress($('#progressbar'), 0, 100, 4); 
}); 

function makeProgress(target, start, stop, steps){ 
    var step = (stop - start)/steps; 
    var increment = function(){ 
     var val = target.progressbar("value"); 
     target.progressbar("option", "value", val + step); 
     if (val + step < stop) setTimeout(increment, 500); 
    }; 
    increment(); 
}

來源

2011-02-03 12:51:16 gor

使用jQuery進度條的動畫

回答

相關問題