Question

What i’m trying to do is this

<span>0%</span>   

I want jQuery to start counting from 0% to a given value .
I have 3 spans each are at 0% but when I click, let say a button, they go from 0%, 1%, 2%, 3% automatic at a certain speed until it reaches it’s given value eg… 99%. Is this possible? thanks.!

I’m not using images as numbers, only text.

Answer 1

EDIT: OK, a single button click should kick off automatic updates of three spans each going to a different total:

<span id="percentSpan1">0%</span>
<span id="percentSpan2">0%</span>
<span id="percentSpan3">0%</span>
<input id="startButton" type="button" value="Start">

<script>
$("#startButton").click(function() {
   var spans = {"percentSpan1" : 99,
                "percentSpan2" : 40,
                "percentSpan3" : 20},
       speed = 3000; // ms

   for (var k in spans) {
      (function(spanId) {
         var currentPercent = 0,
             intervalID = setInterval(function() {
                 $("#" + spanId).text(++currentPercent + "%");
                 if (currentPercent === spans[spanId])
                     clearInterval(intervalID);
             }, Math.floor(speed / spans[spanId]));
      })(k);
   }
});

</script>

You don’t make it clear if the three spans you talk about are supposed to be linked to a single button, or if they’re supposed to go to the same maximum percentage value, so I’ll leave that part to you.