你如何设置jQuery UI进度条的值的动画？

Question

我已经设置了一个jQuery UI进度条,但不能使用jQuery动画来为它的值设置动画.关于如何使这项工作的任何想法？

该percentDone变量保存从0到100应该显示多远沿滚动条是数字(这工作正常).

我尝试过几种不同的东西但无济于事.这是我到目前为止所拥有的:

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

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

请注意,如果我使用"value"方法更新滚动条,它可以正常工作,但它跳转到该值而不是平滑地动画到它:

$("#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);
});

• 演示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应用程序会告诉您文件大小,并在您达到所需的最大值时通知您,因此我的第一个代码旨在演示只是使用进度条设置器和getter,当然还有什么能让整个事情发挥作用,例如循环; 第二个是对糖的相同概念的改编.

Answer 2

CSS3动画

使用CSS3,无需使用JavaScript直接管理进度条的值.只需将其添加到您的样式:

.ui-progressbar-value {
  transition: width 0.5s;
  -webkit-transition: width 0.5s;
}

您可以了解有关CSS3 Transitions的更多信息.

Answer 3

以下是如何让它平滑动画,而不是在@aSeptik当前接受的答案中建议的有点生涩的方式.它绕过了.progressbar('value, ...)方法.

// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");

new_width = "50px";  // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')

Answer 4

在jquery论坛上有一个很好的解决方案

http://forum.jquery.com/topic/smooth-progressbar-animation

应该初始化进度条,让我们说0.1工作

$("#progressbar .ui-progressbar-value").animate(
{
  width: "67%"
}, {queue: false});

Answer 5

写这个插件/方法非常容易为任何进度条制作动画,并且对我很有效,所以我希望它也可以为其他人做.

(function( $ ) {
    $.fn.animate_progressbar = function(value,duration,easing,complete) {
        if (value == null)value = 0;
        if (duration == null)duration = 1000;
        if (easing == null)easing = 'swing';
        if (complete == null)complete = function(){};
        var progress = this.find('.ui-progressbar-value');
        progress.stop(true).animate({
            width: value + '%'
        },duration,easing,function(){
            if(value>=99.5){
                progress.addClass('ui-corner-right');
            } else {
                progress.removeClass('ui-corner-right');
            }
            complete();
        });
    }
})( jQuery );

只需将该代码添加到页面顶部的任何位置,然后在元素上使用它

$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );

编辑:

这是代码的缩小版本,使其加载速度更快.

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);