javascript display numbers as picture with animation
<p>I like to display some numbers as pictures. All numbers are included in one picture.</p>

<p>I started with creating a span for each number and each span get a different class so that I can change the picture for the correct number with the style attribute "background-position".</p>

<p>This is working for me. But now I like to add a little animation to this numbers like count up to the correct value. I can do this for one span (number) but how can I do this for all numbers?</p>

<p><strong>HTML</strong>:</p>

<pre><code>    &lt;style&gt;
.digit0 { background-position: 0  0; }
.digit1 { background-position: 0  -120px; }
.digit2 { background-position: 0  -240px; }
.digit3 { background-position: 0  -360px; }
.digit4 { background-position: 0  -480px; }
.digit5 { background-position: 0 -600px; }
.digit6 { background-position: 0 -720px; }
.digit7 { background-position: 0 -840px; }
.digit8 { background-position: 0 -960px; }
.digit9 { background-position: 0 -1080px; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Examples&lt;/h1&gt;
    &lt;p&gt; 

&lt;div id="number"&gt;here&lt;/div&gt;

    &lt;/p&gt;
&lt;/body&gt;
</code></pre>

<p><strong>Javascript</strong>:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    // Your code here
    var dd = "5487";
    dd = dd.replace(/(\d)/g, '&lt;span class="digit0" id="count$1" style="display: inline-block; height: 20px; line-height: 40px; width: 14px; vertical-align: middle; text-align: center; font: 0/0 a; text-shadow: none; background-image: url(../src/jquery.counter-analog.png); color: transparent; margin: 0;"&gt;&lt;/span&gt;');

    $("#number").html(dd);

    count = $("#count4").attr("id").replace("count", "").toString();

    var i = 0;
    setInterval(function() {
        counter();
    }, 100);

    function counter() {
        if(i &lt; count) {
            i++;    
            $("#count4").attr("class", "digit" + i + "");
        }
    }
});
&lt;/script&gt;
</code></pre>
