Question

我想将百分比设置为100，但jQuery动画有时会停在99！

JS代码：

count = 15;
total = 15;

var now = Math.ceil(( count / total ) * 100);
$('.Count').html('<strong>' +now + '</strong> ');
$({countNum: 0}).animate({countNum: now}, {
  duration: 1000,
  easing: 'linear',
  step: function () {
    $('.Percent').html('<strong>' + Math.ceil(this.countNum) + '</strong> %');
  }
});

HTML：

COUNT: <span class="Count"></span><br />
PERCENTAGE: <span class="Percent"></span>

Jsfiddle：http://jsfiddle.net/MbRE9/464/

你必须尝试一下，看它不会总是以100％结束。

Answer 1

step仅在animation处于活动状态时运行，但不保证最后一步将以100％发生。您需要在done的{{1}}属性中运行自定义函数，以确保在动画完成时运行代码：

animate()

如果您不想写两次，请将其放在变量中：

/*...*/.animate({/*...*/},{
  /*...*/,
  step: function(){
    $('.Percent').html('<strong>' + Math.ceil(this.countNum) + '</strong> %');
  },
  done: function(){
    $('.Percent').html('<strong>' + Math.ceil(this.countNum) + '</strong> %');
  }
}

count = 15;
total = 15;

var now = Math.ceil(( count / total ) * 100),
    cNumUp = function(num) {
      $('.Percent').html('<strong>' + Math.ceil(num) + '</strong> %');
    };
$('.Count').html('<strong>' +now + '</strong> ');

$({countNum: 0}).animate({countNum: now}, {
  duration: 1000,
  easing: 'linear',
  step: function(){cNumUp(this.countNum)},
  done: function(){cNumUp(this.countNum)}
});

Answer 2

在.animate() documentation

上

步骤

类型：Function（Number now，Tween tween）要调用的函数   对于每个动画元素的每个动画属性。这个功能   提供修改Tween对象以更改值的机会   在设置之前的属性。

所以你可以使用像

这样的东西

count = 159;
total = 15;

var now = Math.ceil(( count / total ) * 100);
$('.Count').html('<strong>' +now + '</strong> ');
$({countNum: 0}).animate({countNum: now}, {
  duration: 1000,
  easing: 'linear',
  step: function (now_on_step) {      //<<<<<<< now_on_step here
    $('.Percent').html('<strong>' + Math.ceil(( now_on_step / now ) * 100) + '</strong> %');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
COUNT: <span class="Count"></span><br />
PERCENTAGE: <span class="Percent"></span>

无论您的now变量是什么

，它都会100％返回

jQuery动画不会去目标号码

2 个答案: