jQuery 数字递增动画实现教程 | 使用 animate() 方法 - 常规

要实现数字递增动画，可以使用 jQuery 的 animate() 方法。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>
<body>
  <h1 id='counter'>0</h1>
  
  <script>
    $(document).ready(function() {
      // 目标数字
      var targetNumber = 100;
      
      // 动画持续时间
      var duration = 2000;
      
      // 当前数字
      var currentNumber = 0;
      
      // 每帧更新数字
      function updateNumber() {
        // 计算每帧应该递增的数字
        var increment = (targetNumber - currentNumber) / (duration / 16);
        
        // 更新当前数字
        currentNumber += increment;
        
        // 将数字四舍五入为整数
        currentNumber = Math.round(currentNumber);
        
        // 更新页面上的数字
        $('#counter').text(currentNumber);
        
        // 如果当前数字还没有达到目标数字，则继续更新数字
        if (currentNumber < targetNumber) {
          requestAnimationFrame(updateNumber);
        }
      }
      
      // 开始动画
      updateNumber();
    });
  </script>
</body>
</html>

在上面的代码中，我们首先定义了目标数字（targetNumber）和动画持续时间（duration）。然后，我们使用一个每帧更新数字的函数（updateNumber）来更新当前数字（currentNumber），并将其四舍五入为整数。然后，我们使用 jQuery 的 text() 方法将当前数字更新到页面上的元素（#counter）中。

在每一帧中，我们计算每帧应该递增的数字（increment），然后将其添加到当前数字中。然后，我们检查当前数字是否已经达到了目标数字，如果还没有，则继续调用 requestAnimationFrame() 方法来更新数字。

通过这种方式，我们可以实现一个数字递增的动画效果。您可以根据需要调整目标数字和动画持续时间。