Obsidian Obsidian - 7 months ago 979
Javascript Question

jQuery animated number counter from zero to value

DEMO

I have created a script to animate a number from zero to it's value.

Working



HTML

<span class="Single">150</span>


JQUERY

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





Not Working



I now want to run the script several times on the page for each matching class.

Below is what I am trying but with no success so far:

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

Your thisdoesn't refer to the element in the step callback, instead you want to keep a reference to it at the beginning of your function (wrapped in $thisin my example):

$('.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));
    }
  });
});

Update: If you want to display decimal numbers, then instead of rounding the value with Math.ceil you can round up to 2 decimals for instance with value.toFixed(2):

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