獲得一個jQuery用戶界面的進度條以動畫

這些是被用來表示一個進度條兩個<div> S中的代碼（jQuery的用戶界面的進度條）：獲得一個jQuery用戶界面的進度條以動畫

<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar2"> </div> 
<div style="margin-left: 10px; margin-right: 10px; font-size: 10px;" id="progressbar"> </div>

這是用於對jQuery設置的值，並獲得在後端代碼中的進度條

<script> 
$(document).ready(function() { 
    var progValue1 = <%=ProgValue1%>; 
    var progValue2 = <%=ProgValue2%>;  
    $("#progressbar").progressbar({ value: progValue1}); 
    $("#progressbar2").progressbar({ value: progValue2 }); 
}); 
</script>

值我這是怎麼了進度條傳輸值：

private int _progValue1 = 100; 
private int _progValue2 = 30; 

public int ProgValue1 { get { return this._progValue1; } set { _progValue1 = value; } } 
public int ProgValue2 { get { return this._progValue2; } set { _progValue2 = value; } }

當確認按鈕被點擊，這是在點擊的方法來改變進度條值的代碼：

this.ProgValue1 = 0; 
this.ProgValue2 = 100;

這種方式，所有我做的是改變進度，從100到0值並且progressbar2的值從30到100.

有沒有辦法以這種方式更改值，這樣就可以生成動畫，就好像第一個進度條逐漸減少到0，並且progressbar2正在增加到100？

Thanx提前

來源

2012-08-05 Answer_42

爲什麼你不能在jQuery中管理相同？延遲函數調用並根據需要減小值。 – Sriram 2012-08-05 06:43:44

您是否需要從asp.net獲取進度值纔是強制性的？ – Sriram 2012-08-05 06:53:17

我需要做的是在點擊確認按鈕時爲進度條設置動畫。如果有辦法做到這一點，但沒有從asp.net獲取進度值，那就這樣吧......我在帖子中顯示的代碼正是我如何獲得進度條才能工作到目前爲止.. 。有一些來自SO的幫助：p – 2012-08-05 07:04:31

看看下面的一個...

<html> 
<head> 
<link type="text/css" href="jquery-ui-1.8.22.custom.css" rel="Stylesheet" /> 

<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8.22.custom.min.js"></script> 
<script type="text/javascript"> 
var increase = 0; 
var decrease = 100; 

$(document).ready(function() { 
    var anim = setInterval(function(){ 
     $("#progressbar1").progressbar({ 
      value: increase ++   
     }); 
     $("#progressbar2").progressbar({ 
      value: decrease --   
     }); 
     if(increase == 100){ 
      // clearInterval(anim); 
      increase = 0; 
      decrease = 100; 
     } 
    }, 50); 
}); 
    </script> 
</head> 
<body> 
<div id="progressbar1" style="width: 500px; height: 15px;"></div><br /> 
<div id="progressbar2" style="width: 500px; height: 15px;"></div> 
</body> 
</html>

動畫，當你刪除這些註釋，此行clearInterval(anim)

希望這有助於停止！

來源

2012-08-05 08:49:17 Sriram

thanx男子！有效 ........ – 2012-08-07 08:23:23

獲得一個jQuery用戶界面的進度條以動畫

回答

相關問題