Making an effect of number changing

Question

I have a counter set like this:

<ul>
    <li id="cenMill">0</li>
    <li id="decMill">0</li>
    <li id="uniMill">0</li>
    <li id="cen">3</li>
    <li id="dec">2</li>
    <li id="uni">1</li>
</ul>

0 0 0 3 2 1

My intention is to have each number change according to a variable I give it, that is if I add +1 then just change id="uni" from 1 to 2 but if I gave it 12 then change both that are affected and so on. However I don't know how to start to do this so far this is what I have:

$('#uni').animate({
    marginTop: "-25px",
},200);

But this only places the 1 to the top, it doesn't make a "2" pop from underneath as the next number and the 1 is visible and I can't hide it even with display, "none" or others like it. Any help (or ideas) as to how to do this?

Answer 1

This might be similar to what you are trying to achieve: Number ticker demo.

It's a hasty copy-paste from: http://damienhowley.wordpress.com/2009/06/29/jquery-number-ticker/

Even if you can't use it as is, it should give you some pointers on how to create your own. Good luck.