Animating each number on Jquery countdown timer

Question

http://jsfiddle.net/GNrUM/

The current jsfiddle above shows a 2 second count down. Imagine there is no text and just the number. I was trying to find out:

a) how i should integrate some sort of animation into the js so the number changes size, color and position whilst its currently being counted (in time with its duration). Css3 would work but i'm needing it to be javascript based so it will work on older browsers on mobile.

b) Once the countdown had finished display other content as if it were a new page but still on same url.

Any feedback much appreciated.

EDIT: Even a good hint to help me along my way may even be better for me to help figure it out myself. It's just a lack of syntax knowledge being a bit of noob in js. cheers

Answer 1

use animate() function

var sec = 10
var timer = setInterval(function() {
    $('#hideMsg span').animate({
        opacity: 0.25,
        fontSize: '2em'
    }, 500, function() {
        $('#hideMsg span').css('opacity', 1);
        $('#hideMsg span').css('font-size', '1em');
        $('#hideMsg span').text(sec--);
    })

    if (sec == -1) {
        $('#hideMsg').fadeOut('fast');
        clearInterval(timer);
    }
}, 1000);​

JSFiddle link: http://jsfiddle.net/GNrUM/412/