Question

I have some numbered statistics on my page and I’d like to make them a little more visually appealing. I thought it might be cool to use jQuery to simulate counting up to that number.

So on page load, say the number is 32. The number would start at 0 and count up to 32, with some delay interval between each number.

How would I accomplish this? This is the code that I tried, but it’s not working. It captures the number(s) on the page (there are 3 statRibbons), but it’s not visually counting up where I can see each number 0, 1, 2, 3, etc. Ideally, it would count up each ribbon one at a time instead of at the same time, but if it requires bulky extra code, then that’s okay. The .each should take care of this anyway, I would think.

$(function() {
  $(".statRibbon .bigStat span").each(function() {
      var tmp = this.innerHTML;
      var i = 0;
      while(i != tmp) {
          $(".statRibbon .bigStat span").innerHTML(i++);
          alert(i);
      }
  });
});

Answer 1

How does this work for you?

http://jsfiddle.net/WpJxn/1/

Change the 50 at the end of the setTimeout function to change the speed it counts in miliseconds.