Jquery Animate無法完成動畫的問題

Question

我的頁面上運行着相當多的動畫，並且我認為這會導致特定動畫停頓，然后有時無法完成其動畫。

我已經在頁面上的一些百分比條上寫了動畫。

我嘗試添加超時功能，以便它給其他動畫一些時間來完成，但是超時不起作用，它似乎在頁面加載后立即觸發。 確保我完成百分比的任何幫助都將是驚人的

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>

Answer 1

您正在立即調用dopercentage() ，然后將結果傳遞給setTimeout。

setTimeout需要函數引用 ，而不是函數調用的結果。

只需傳遞函數引用（名稱）即可：

$(document).ready(function() {
  setTimeout( dopercentage, 1000);
});

除此之外，我只需要刪除樣本中最初的91％文本。 當代碼不觸發時，我用您的測試值結束了:)

JSFiddle： https ：//jsfiddle.net/Ly3vj12d/1/