Jquery Animate 无法完成其动画的问题

Trouble with Jquery Animate not finishing it's animation

本文关键字：动画 问题 Animate Jquery      更新时间：2023-09-26

我的页面上运行了相当多的动画，我认为它会导致这个特定的动画卡顿，然后有时无法完成其动画。

我已经把它写成动画页面上的一些百分比条。

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

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>

您立即调用dopercentage()，然后将结果传递给setTimeout。

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

只需传递函数引用（名称）：

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

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

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

相关文章：