您如何为 jQuery UI 进度条设置动画值? [英] How do you animate the value for a jQuery UI progressbar?

问题描述

我已经设置了一个 jQuery UI 进度条，但无法使用 jQuery animate 为其值设置动画.关于如何完成这项工作的任何想法?

I've setup a jQuery UI progressbar but can't use jQuery animate to animate it's value. Any ideas on how to make this work?

percentDone 变量包含一个从 0 到 100 的数字，显示滚动条应该有多远(这很好用).

The percentDone variable holds a number from 0 to 100 showing how far along the scrollbar should be (this works fine).

我尝试了几种不同的方法都无济于事.这是我到目前为止所拥有的:

I've tried several different things to no avail. Here's what I have so far:

var progressbar = $("#progressbar1").widget();

progressbar.animate({
    value: percentDone
}, 5000, function() {
    console.debug('done animating');
});

请注意，如果我使用值"方法更新滚动条，它工作正常，但它会跳转到该值而不是平滑地为其设置动画:

Note that if I update the scrollbar using the "value" method it works fine but it jumps to that value instead of smoothly animating to it:

$("#progressbar1").progressbar('value', percentDone);

推荐答案

• 演示 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);
});

• 演示 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 */
    }
});

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

In a real application you may not need to generate a loop, for example, while uploading a file, your flash aplication will tell you the filesize and let you know when you have reached the max value needed, so my first code is intended to demonstrate just the use of the progressbar setter and getter and of course what make the whole thing play, that is for instance, the loop; the second one is an adaptation of the same concept with sugar.

这篇关于您如何为 jQuery UI 进度条设置动画值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！