数字代码开始计数然后停止

Question

我有一个数字代码，它是一个数字字段，最大值为100。

使用下面的当前代码，我的计数器不计数。我的猜测是因为在我的演示中，data-count等于值，但我希望数字从0开始计数。

即如果我将data-count更改为100，它将从50计数到100，而我希望它从0计数到它的值。

代码：

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },

    {

      duration: 4000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }

    });

});

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="numberTicker__list">

  <ul>
    <li>
      <div class="numberTicker__content">
        <h3 class="counter" data-count="50">50</h3>
      </div>
    </li>
  </ul>

  <ul>
    <li>
      <div class="numberTicker__content">
        <h3 class="counter" data-count="100">50</h3>
      </div>
    </li>
  </ul>

</div>

Answer 1

解决方案1：最简单的方法。

$('.counter').each(function() {
  var $this = $(this),
      countTo = $this.attr('data-count'),
      countFrom = 0;

  $({
      countNum: countFrom
  }).animate({
      countNum: countTo
  },

  {

      duration: 4000,
      easing: 'linear',
      step: function() {
         $this.text(Math.floor(this.countNum));
      },
      complete: function() {
         $this.text(this.countNum);
         //alert('finished');
      }

   });

});

ul { list-style-type: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="numberTicker__list">

    <ul>
        <li>
            <div class="numberTicker__content">
                <h3 class="counter" data-count="50">50</h3>
            </div>
        </li>
    </ul>

    <ul>
        <li>
            <div class="numberTicker__content">
                <h3 class="counter" data-count="100">50</h3>
            </div>
        </li>
    </ul>

</div>

解决方案2：最合适的方法。

$('.counter').each(function() {
  var $this = $(this),
      countFrom = $this.attr('data-countFrom'),
      countTo = $this.attr('data-countTo');

  $({
      countNum: countFrom
  }).animate({
      countNum: countTo
  },

  {

      duration: 4000,
      easing: 'linear',
      step: function() {
         $this.text(Math.floor(this.countNum));
      },
      complete: function() {
         $this.text(this.countNum);
         //alert('finished');
      }

   });

});

ul { list-style-type: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="numberTicker__list">

    <ul>
        <li>
            <div class="numberTicker__content">
                <h3 class="counter" data-countFrom="0" data-countTo="50">50</h3>
            </div>
        </li>
    </ul>

    <ul>
        <li>
            <div class="numberTicker__content">
                <h3 class="counter" data-countFrom="0" data-countTo="100">50</h3>
            </div>
        </li>
    </ul>

</div>

Answer 2

将代码countNum: $this.text()更改为Counter: 0。它会工作的。 检查下面的链接以获取演示。

$('.counter').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');

  $({
    Counter: 0
  }).animate({
      countNum: countTo
    },

    {
      duration: 4000,
      easing: 'linear',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
        //alert('finished');
      }

    });

});

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="numberTicker__list">

  <ul>
    <li>
      <div class="numberTicker__content">
        <h3 class="counter" data-count="50">50</h3>
      </div>
    </li>
  </ul>

  <ul>
    <li>
      <div class="numberTicker__content">
        <h3 class="counter" data-count="100">50</h3>
      </div>
    </li>
  </ul>

</div>