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".

"I don't think any code needs to be posted". You'd be wrong about that. Most users here don't enjoy going to a foreign site to sift through code. Please paste the relevant code here. — j08691, May 26 '13 at 20:00
Please don't so `setInterval('updatetimer()', 1000 );`, but `setInterval(updatetimer, 1000 );` or `setInterval(function() { }, 1000 );`. — PeeHaa, May 26 '13 at 20:07
To make it really pretty, you will want to crossfade two separate elements on top of each other - one fades in while the other fades out. CSS3 transitions are fairly straightforward - [Here is a fiddle](http://jsfiddle.net/bigbiff02/HPdAX/3/) that fades in and out, but you want a cross-fade effect which would combine two elements, and I don't have the energy to fiddle that out right now ;) — rGil, May 26 '13 at 20:36

score 0 · Accepted Answer · answered May 26 '13 at 21:03

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

score -1 · Answer 2 · answered May 26 '13 at 20:11

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

Nah, this just causes nothing to show up. I'd put up the page but my host is being difficult today. — Patrick, May 26 '13 at 20:14

score -2 · Answer 3 · answered May 26 '13 at 20:02

-2

You can use Jquery Fadeout

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

answered May 26 '13 at 20:02

user1889970

726
1
8
12

3

I'm not sure this is what I'm looking for. If you look at the code above, where exactly would this apply? – Patrick May 26 '13 at 20:07

Fading Text on Countdown Timer

3 Answers3