获得一个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用户界面的进度条以动画

回答

相关问题