Stack Overflow Answer

http://stackoverflow.com/a/15825148/54680

by Jonathan Sampson

HTML

<div id="countdown">5</div>
<div id="buttons">
    <a href="x.html">One</a> 
    <a href="y.html">Two</a> 
    <a href="z.html">Three</a>
</div>

CSS

#countdown {
    padding: .5em 0;
    text-align: center;
    font: 4em 'Segoe UI';
}

#buttons, 
#buttons a {
    text-align: center;
}

#buttons a {
    opacity: 0;
    padding: 1em 2em;
    display: inline-block;
    width: 20%;
    background: #333;
    color: #FFF;
    text-decoration: none;
    border-radius: .25em;
}

JavaScript

// Important references
var countdn = $("#countdown"),
    buttons = $("#buttons a"),
    seconds = 5;

// Interval to handle the countdown
var cInterval = setInterval(function () {
    countdn.fadeOut(250, reduceNum);
}, 1000);

// Logic responsible for the countdown
function reduceNum () {
    if ( --seconds ) {
        $(this).text(seconds).fadeIn(250);
    } else {
        clearInterval(cInterval);
        transitionLayout();
    }
}

// Logic to reveal our buttons when the time is right
function revealButtons () {
    buttons.each(function (index) {
        $(this).delay(index * 500).animate({ opacity: 1 }, 1000);
    });
}

// Logic to handle the transition
function transitionLayout () {
    countdn.remove();
    revealButtons();
}