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/

Answer 2

I would look at something similar to this library: http://ricostacruz.com/jquery.transit/

It will use CSS3 transitions when available and do a graceful fallback.

As to where to add it, before you do this:

$('#hideMsg span').text(sec--);

I would perform the required animation and in the onfinish of the animation execute the above code to update the timer.

Answer 3

http://jsfiddle.net/GNrUM/410/

var sec = 10
var timer = setInterval(function() { 
    var color = sec > 5 ? "red" : "green";
   $('#hideMsg span').text(--sec).css("font-size", 10+sec*2 + "px").css("color", color);
   if (sec == 0) {
      $('#hideMsg').fadeOut('fast');
      clearInterval(timer);
   } 
}, 1000);​

These values may not be what you're looking for, but this gives you the basic idea to get started.

Answer 4

I have used this jQuery plugin in the past. It has onUpdate and onComplete callbacks. You should be able to restyle the counter onUpdate and also hide it and load some content onComplete. Does that make sense to you?

I see you need to count down, not up, but you should have no problem adapting the plug-in as it's quite simple.