jQuery动画百分比数字?

时间:2012-03-25 19:50:19

标签: jquery

我看了一遍,但我找不到如何使用jQuery的.animate()函数来设置我所拥有的百分比。

我有一个进度条,其百分比高于它。当页面加载时,我只想将数字从0增加到定义的数字,比方说67%。如何为数字设置动画,使其显示为1%,2%,3%......最高达67%?

另外需要注意的是我想使用jQuery的.animate()函数,因为我想定义达到67%所需的时间。

5 个答案:

答案 0 :(得分:2)

您可以使用step属性在animate函数内执行此操作。像这样:

  $(elem).animate({
        width : '200px' //whatever your bar animation consists of
  }, {
        step  : function(now, fx){
             //use the 'now' to calculate percent and update the number
             $(percentElem).text(now / 200);
        }
  }, 2000); // set duration

答案 1 :(得分:1)

制作自己的功能会更好。我可以建议一个。

window.loadBar = {
    startTime: null,
    time: 500,
    updater: null
}
function loadBarStart(){
    loadBar.startTime = new Date();
    loadBar.updater = function(){
       var delta = (new Date() - loadBar.startTime)/loadBar.time;
       $("#bar").html((delta*100)+"%");
       if(delta<1)window.setTimenout(loadBar.updater, 30);
    }
    loadBar.updater();
}

我没有测试它,但它应该可以工作。

答案 2 :(得分:0)

您可能想要的是使用$('#element').html(data)从真实来源获取data或使用计时器。进度条通常通过动态插入进度条的宽度来完成。

答案 3 :(得分:0)

除非您喜欢从头开始编写代码,请查看以下内容:http://jqueryui.com/demos/progressbar/

初始化了进度条之后,就像这样“动画”它:

$('#yourBar').progressbar( "value" , 55 );

答案 4 :(得分:0)

这是基于之前答案的解决方案。在这种情况下,“percentage”是在调用函数之前设置的全局变量。使用添加到值的小数和使用setTimeout ms来更改行为。

function animateProgress() {
    var value = $("#progress").progressbar( "option", "value" );

    if ( value < percentage ) {
        value = value+.5;
    } else if ( percentage < value ) {
        value = value-.5;
    }

    $("#progress").progressbar( "option", "value", value );
    $('#readout').html( value+' - '+percentage+'%' );
    if ( value != percentage ) {
        setTimeout( function(){ animateProgress(); }, 2 );
    }
}