jquery - 如何为 jQuery UI 进度条的值设置动画？

Question

我已经设置了一个 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);

Answer 1

• 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: :出于好意，改编了下面@Peter 的回复;-)。

$(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 */
    }
});

在真实的应用程序中，您可能不需要生成循环，例如，在上传文件时，您的闪存应用程序会告诉您文件大小，并让您知道何时达到所需的最大值，所以我的第一个代码是旨在演示进度条 setter 和 getter 的使用，当然还有使整个事情发挥作用的因素，例如循环；第二个是对糖的相同概念的改编。