Single Page Website Sample with jQuery Transitions

Just playing around with jQuery to show off simple but smooth as butta jQuery transitions. This is a simple single page website sample utilizing jQuery transitions.

by chrisallenmoore

HTML

<div id="topnav">
    <ul>
        <li><a href="#" id="nav">Home</a></li>
        <li><a href="#" id="rubyonrails" class="control">Ruby on Rails</a></li>
        <li><a href="#" id="jquery" class="control">jQuery</a></li>
        <li><a href="#" id="html5" class="control">HTML5</a></li>
        <li><a href="#" id="css3" class="control">CSS3</a></li>
        <li><a href="#" id="sass" class="control">Sass.</a></li>
    </ul>
</div>

<div id="wrapper">
    <div class="item header head navigation rubyonrails jquery html5 css3 sass">header - top nav</div>
    <div class="item home header homepage">home page</div>
    <div class="item header navigation nav rubyonrails jquery html5 css3 sass">sub nav</div>
    <div class="item header navigation rubyonrails">Ruby on Rails</div>
    <div class="item header navigation jquery">jQuery</div>
    <div class="item header navigation html5">HTML5</div>
    <div class="item header navigation css3">CSS3</div>
    <div class="item header navigation sass">Sass.</div>
</div>

CSS

#topnav {
    text-align: center;
    background: #333;
}
#topnav ul {
    padding: 4px;
}
#topnav ul li{
    display: inline;
    padding: 4px;
}
#topnav ul li a{
    color: #fff;
    text-decoration: none;
}
#topnav ul li a:hover{
    color: #ccc;
}
#wrapper {
    width: 304px;
    margin: 0 auto;
}

#wrapper > div {
    display: block;
    width: 302px;
    height: 40px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
    float: left;
    text-align: center;
    background: #333;
    color: #fff;
}

JavaScript

$('.rubyonrails, .jquery, .html5, .css3, .sass').hide();
$('.home').slideUp(500);
$('.nav').slideUp(500);
$('.head').slideDown(500);
$('.home').slideDown(500);
$('.nav').slideDown(500);

$('a.control').click(
function(){
   var show = this.id;
    $('#wrapper > div.' + show).fadeIn(500);
    $('#wrapper > div:not(".'+show+'")').hide(500);
    return false;
});
$('a#nav').click(
    function(){
        
        $('.rubyonrails, .jquery, .html5, .css3, .sass').hide();
        $('.head').show();
        $('.home').hide(500);
        $('.nav').slideUp(500);
        $('.home').show(500);
        $('.nav').slideDown(1000);       
        return false;
    });