如何使用jQuery.animate实现数字步长大于1的递增动画效果

实现方案 #

你只需要在原有代码基础上增加步长配置，在step回调中把当前计数值和步长做对齐处理即可，以下是修改后的可运行代码：

完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">100</div>

// 自定义递增步长，这里设置为5就会按照0、5、10...的规律增长
const stepSize = 5;
const targetNum = Number(jQuery('.ticker').text());

jQuery({ countNum: 0 }).animate({ 
  countNum: targetNum
}, {
  duration: 2000,
  easing: 'swing',
  step: function() {  
    // 按步长对齐当前数值
    const current = Math.round(this.countNum / stepSize) * stepSize;
    // 避免超过目标值
    jQuery('.ticker').text(Math.min(current, targetNum));
  },
  complete: function() {  
    // 强制设置为目标值，避免步长无法整除目标值导致最终显示错误
    jQuery('.ticker').text(targetNum);
  },
});

配置说明

• 把stepSize变量的值改成你需要的步长即可，比如设置为10就是每次增长10，设置为2就是每次增长2
• 如果需要不规则步长（比如先1后5再10这种自定义增长规律），可以把步长计算逻辑替换成自己的映射规则即可

内容的提问来源于stack exchange，提问作者Daniel Taylor