Javascript jqueryanimate没有完成的问题';s动画

Javascript jqueryanimate没有完成的问题';s动画,javascript,jquery,css,animation,Javascript,Jquery,Css,Animation,我的页面上有相当多的动画,我认为这会导致这个特定的动画结巴,有时甚至无法完成动画 我已经在页面上的一些百分比栏上写了这个动画 我已经尝试添加一个超时函数,以便给其他动画一些时间来完成,但是超时不起作用,而且似乎在页面加载后立即触发。任何帮助确保我完成的百分比都将是惊人的 function dopercentage() { $('.bar-percentage[data-percentage]').each(function () { var progress = $(this); v

我的页面上有相当多的动画,我认为这会导致这个特定的动画结巴,有时甚至无法完成动画

我已经在页面上的一些百分比栏上写了这个动画

我已经尝试添加一个超时函数,以便给其他动画一些时间来完成,但是超时不起作用,而且似乎在页面加载后立即触发。任何帮助确保我完成的百分比都将是惊人的

function dopercentage()
{
  $('.bar-percentage[data-percentage]').each(function () {
  var progress = $(this);
  var percentage = Math.ceil($(this).attr('data-percentage'));
  $({countNum: 0}).animate({countNum: percentage}, {
    duration: 1000,
    easing:'swing',
    step: function() {
      // What todo on every count
    var pct = '';
    if(percentage == 0){
      pct = Math.floor(this.countNum) + '%';
    }else{
      pct = Math.floor(this.countNum+1) + '%';
    }
      progress.text(pct) && progress.siblings().children().css('width',pct);
    }
  });
});
}

$(document).ready(function() {
  setTimeout( dopercentage(), 1000);
});
下面是一个HTML示例,说明应该设置动画,但失败率为91%

<div id="bar-5" class="bar-main-container" style="margin-left:auto;margin-right:auto;background:#cb0050;max-width: 250px;">
        <div class="wrap">
          <div id="bar-percentage13" class="bar-percentage" data-percentage="100">91%</div>
          <div class="bar-container">
            <div class="bar" style="width: 91%;"></div>
          </div>
        </div>
      </div>

91%

您正在立即调用
dopercentage()
,然后将结果传递给setTimeout

setTimeout
需要函数引用,而不是函数调用的结果

只需传递函数引用(名称):

除此之外,我只需要从样本中删除最初91%的文本。当代码没有启动时,我用您的测试值结束:)


jsiddle:

请创建一个工作示例。谢谢,宽度实际上不在基本代码中,只是我从屏幕抓图粘贴代码时复制的宽度。我的问题是,当我的页面上有更多的对象要设置动画时,每个对象只能设置91%-99%之间的随机数。
$(document).ready(function() {
  setTimeout( dopercentage, 1000);
});