我想单独应用计数动画

Question

我希望像文本一样应用数字计数动画效果。但是，当有两个或多个numB 类时，显示的是组合值。我想给每个标签一个相同的效果。

<div class="numB">12345</div>
<div class="numB">600</div>

  $(function(){
    var ln = Number($('.numB').text());
    var $el = $('.numB');
    $($el).animate({ val: ln }, {
      duration: 2000,
      step: function () {
        var num = numComma(Math.floor(this.val));
        // $el.text(num); //have Comma
        $el.text(Math.floor(this.val)); //none Comma
      },
      complete: function () {
        var num = numComma(Math.floor(this.val));
        $el.text(Math.floor(this.val));
      }
    });

    function numComma(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  });

Answer 1

您所要做的就是包含 .each() 函数。然后就可以正常使用了。

演示

$(function() {
  $(".numB").each(function() {
    var ln = Number($(this).text());
    var $el = $(this);
    $($el).animate({
      val: ln
    }, {
      duration: 2000,
      step: function() {
        var num = numComma(Math.floor(this.val));
        // $el.text(num); //have Comma
        $el.text(Math.floor(this.val)); //none Comma
      },
      complete: function() {
        var num = numComma(Math.floor(this.val));
        $el.text(Math.floor(this.val));
      }
    });
  });

  function numComma(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="numB">12345</div>
<div class="numB">600</div>

我想单独应用计数动画

I want to apply the count animation individually

javascript

jquery

jquery-animate