Slide Down Buttons - Like LOGMEIN.com

by bizamajig

HTML

<div id="header-container">

        <div id="header">

            <a href="#"><div id="btnHome" class="nav-button">home</div></a>
            <a href="#"><div id="btnAbout" class="nav-button">about</div></a>
            <a href="#"><div id="btnMovies" class="nav-button">movies</div></a>
            <a href="#"><div id="btnContact" class="nav-button">contact</div></a>
            <a href="#"><div id="btnTheTeam" class="nav-button">the team</div></a>

        </div>

CSS

* {
    margin:0;padding:0px;
}
body {
    background:#696969;
}
#header-container {
    width:100%;
    height:150px;
    background:#696969;
}
/*/*url(../-images/header-bg.jpg) repeat*/
#header {
    width:980px;
    height:150px;
    margin:0 auto;
}
.nav-button {
    width:176px;
    height:150px;
    float: left;
    font-family:helvetica;
    text-align:center;
    font-size:20pt;
    color:white;/*
    border:5px solid transparent;*/
}
#btnHome {
    background:#1E90FF;
    height:80px;
    padding-top:50px;
    display:none;
    box-shadow:inset 0px 0px 25px dark blue;
    margin:10px 5px 10px 10px;
}
#btnAbout {
    background:#228B22;
    height:80px;
    padding-top:50px;
    display:none;
    margin:10px 5px 10px 5px;
}
#btnMovies {
    background:#48D1CC;
    height:80px;
    padding-top:50px;
    display:none;
    margin:10px 5px 10px 5px;
}
#btnContact {
    background:#FF4500;
    height:80px;
    padding-top:50px;
    display:none;
    margin:10px 5px 10px 5px;
}
#btnTheTeam {
    background:#800080;
    height:80px;
    padding-top:50px;
    display:none;
    margin:10px 10px 10px 5px;
}
a {
    text-decoration:none;
}

JavaScript

$(document).ready(function() {
    $('#btnHome').slideDown(800);
    $('#btnAbout').slideDown(850);
    $('#btnMovies').slideDown(900);
    $('#btnContact').slideDown(950);
    $('#btnTheTeam').slideDown(1000);
    $('#login-box').slideDown(5200);
});

$('#btnHome').mouseenter(function() {
    $('body').css('background' , '#1E90FF');
});

$('#btnAbout').mouseenter(function() {
    $('body').css('background' , '#228B22');
});

$('#btnMovies').mouseenter(function() {
    $('body').css('background' , '#48D1CC');
});

$('#btnContact').mouseenter(function() {
    $('body').css('background' , '#FF4500');
});

$('#btnTheTeam').mouseenter(function() {
    $('body').css('background' , '#800080');
});

$('.nav-button').mouseleave(function() {
    $('body').css('background' , '#696969');
});