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);