如何为jQuery UI进度条的值设置动画效果?

前端之家收集整理的这篇文章主要介绍了如何为jQuery UI进度条的值设置动画效果?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我设置了一个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,当然是什么让整个事情发挥,那就是例子,循环;第二个是同一个概念与糖的适应。

猜你在找的jQuery相关文章