jQ数字动画特效

<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>jQ数字动画特效</title>
  <style type="text/css">
    .content {
      font-size: 80px;
      font-weight: 600;
      color: #333;
      line-height: 100vh;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="content">1024</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $('.content').prop('Counter', 0).animate({
        // prop() 方法设置或返回被选元素的属性和值。
        Counter: $('.content').text()
      }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
          $('.content').text(Math.ceil(now));
          //Math.ceil() 函数返回大于或等于一个给定数字的最小整数。
        }
      });
    });
  </script>
</body>

</html>
jQ数字动画特效

推荐阅读更多精彩内容
