获取 jquery ui 进度条以进行动画处理
Posted
技术标签:
【中文标题】获取 jquery ui 进度条以进行动画处理【英文标题】：Getting a jquery ui progress bar to animate 【发布时间】：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 【参考方案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)
希望这会有所帮助！
【讨论】：
以上是关于获取 jquery ui 进度条以进行动画处理的主要内容，如果未能解决你的问题，请参考以下文章