1

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

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

提前感谢

4

1 回答 1

2

看看下面的...

<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-05T08:49:17.887 回答