Fading Text on Countdown Timer

Question

I've recently been put in charge of making a countdown page for a game launch. Now, I've got a simple countdown javascipt file made from this tutorial, but I'd like to make it a bit more fancy. I'd like to find some way to make the numbers fade out to the next one, just to make it a little less "jerky." Is there an easy way to do this? I've googled around and haven't really found a straightforward way.

Here's the JS:

function updatetimer() {
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
}
setInterval('updatetimer()', 1000 );

And on the page there's simply an empty div named "timer".

Answer 1

Here's the quick and dirty version using CSS3 with 2 elements cross-fading. Fiddle Here

CSS:

.readyToFade{-webkit-transition: opacity 1s ease-out;
             -moz-transition: opacity 1s ease-in-out;
             -o-transition: opacity 1s ease-in-out;
             -ms-transition: opacity 1s ease-in-out;
              transition: opacity 1s ease-in-out;
}
.fadeOut{
           opacity: 0;
}

And the markup contains 2 elements. The javascript here is ROUGH, but you get the picture.

function updatetimer() {
var el;
var el2;
if (document.getElementById('timer').className != 'readyToFade fadeOut'){
    console.log("yay");
    el = document.getElementById('timer2');
    el2 = document.getElementById('timer');

} else {
    console.log("no");

    el = document.getElementById('timer');
    console.log(el.className);
    el2 = document.getElementById('timer2');
}


console.log(el);
now = new Date();
launch = Date.parse("August 20, 2013 12:00:00");
diff = launch - now;

days  = Math.floor( diff / (1000*60*60*24) );
hours = Math.floor( diff / (1000*60*60) );
mins  = Math.floor( diff / (1000*60) );
secs  = Math.floor( diff / 1000 );

dd = days;
hh = hours - days  * 24;
mm = mins  - hours * 60;
ss = secs  - mins  * 60;

el.innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds';

el2.className = "readyToFade fadeOut";

el.className = "readyToFade initial";

}
setInterval(function(){
    updatetimer();
},1000);

Answer 2

Try this.The code is untested though.

function updatetimer() {
    $("#timer").fadeIn();
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
    $("#timer").fadeOut();
}
setInterval('updatetimer()', 1000 );

Answer 3

You can use Jquery Fadeout

$("button").click(function(){
$("p").fadeOut();
});