Question

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

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

另外需要注意的是我想使用jQuery的.animate（）函数，因为我想定义达到67％所需的时间。

Answer 1

您可以使用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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

这是基于之前答案的解决方案。在这种情况下，“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 );
    }
}

jQuery动画百分比数字？

5 个答案: