获取 jquery ui 进度条以进行动画处理答案

【问题标题】：Getting a jquery ui progress bar to animate获取 jquery ui 进度条以进行动画处理
【发布时间】：2012-08-02 14:34:53
【问题描述】：

这些是用于表示进度条的两个<div>s 的代码（jquery ui 进度条）：

<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; } }

当点击确认按钮时，这是 click 方法中用于更改进度条值的代码：

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

这样我所做的就是将progressbar的值从100更改为0，并将progressbar2的值从30更改为100。

有没有办法以这样的方式改变值，这样就可以动画化，好像第一个进度条逐渐减少到 0，progressbar2 增加到 100？

提前感谢

【问题讨论】：

为什么不能在 jquery 中管理相同的？延迟函数调用并根据需要减少值。
是否必须从 asp.net 获取进度值？
我需要做的就是在单击确认按钮时为进度条设置动画。如果有一种方法可以在不从 asp.net 获取进度值的情况下做到这一点，那么就这样吧......我在帖子中显示的代码正是我如何让进度条工作至今.. . 在 SO 的帮助下：p
How do you animate the value for a jQuery UI progressbar?的可能重复
@FrédéricHamidi 我认为我的方法与那个方法有点不同......仍然链接很有帮助......链接+1

标签： c# jquery asp.net progress-bar

【解决方案1】：

看看下面的...

<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>

当您将 cmets 移到这一行时动画停止 clearInterval(anim)

希望这会有所帮助！

【讨论】：