我设置了一个jQuery UI进度条，但不能使用jQuery animate来动画它的价值。任何想法如何使这项工作？
percentDone变量保存从0到100的数字，表示沿滚动条应该有多远(这很好)。
我试过几种不同的东西没有用。这里是我到目前为止：
var progressbar = $("#progressbar1").widget();
progressbar.animate({
value: percentDone
},5000,function() {
console.debug('done animating');
});
注意，如果我使用“值”方法更新滚动条，它工作正常，但它跳转到该值，而不是平滑地动画到它：
$("#progressbar1").progressbar('value',percentDone);
解决方法
>
DEMO 1:第一个，概念证明
$(function() {
var pGress = setInterval(function() {
var pVal = $('#progressbar').progressbar('option','value');
var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
if (pCnt > 100) {
clearInterval(pGress);
} else {
$('#progressbar').progressbar({value: pCnt});
}
},10);
});
> DEMO 2:：适应@彼得的回答以下为好缘;-)。
$(function() {
$('#progressbar').progressbar(); // inizializa progressbar widget
$pVal = $('.ui-progressbar-value').addClass('ui-corner-right');
var pGress = setInterval(function() { //generate our endless loop
var pCnt = $pVal.width(); // get width as int
// generate a random number between our max 100 and it's half 50,// this is optional,and make the bar move back and forth before
// we reach the end.
var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
doAnim(step);
},1000);
var doAnim = function(wD) {
// complete easing list http://jqueryui.com/demos/effect/easing.html
$pVal.stop(true).animate({width: wD + '%'},1000,'eaSEOutBounce');
if (wD >= 100) clearInterval(pGress) /* run callbacks here */
}
});
在一个真正的应用程序中，你可能不需要生成一个循环，例如，在上传文件时，你的flash应用程序会告诉你文件大小，让你知道什么时候达到所需的最大值，所以我的第一个代码是为了演示只是使用progressbar的setter和getter，当然是什么让整个事情发挥，那就是例子，循环;第二个是同一个概念与糖的适应。