javascript - jQuery 动画数字计数器从零到值

Question

我创建了一个脚本来将数字从零变为它的值。

工作

jQuery

$({ Counter: 0 }).animate({
  Counter: $('.Single').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.Counter));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

---

不工作

我现在想在每个匹配类的页面上多次运行该脚本。

下面是我正在尝试但到目前为止没有成功的:

HTML

<span class="Count">200</span>
<span class="Count">55</span>

JQUERY

$('.Count').each(function () {
  jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $(this).text(Math.ceil(this.Counter));
    }
  });
});

Answer 1

您的 this 没有引用步骤回调中的元素，而是您想在函数的开头保留对它的引用(包装在 $this在我的例子中):

$('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});

更新:如果您想显示小数，那么您可以使用 将值四舍五入到 2 位小数，而不是使用 Math.ceil值.toFixed(2):

step: function () {
  $this.text(this.Counter.toFixed(2));
}