Jquery - Scroll & Roll !

by blowsie

HTML

<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<ul id="nav">
    <li><a class='home'>Home</a></li>
    <li><a class='about'>About</a></li>
    <li><a class='gallery'>Gallery</a></li>
    <li><a class='food'>Food</a></li>
</ul>

<div id="outer-wrap">
    <div id="wrap">
        <div class='red home'>
            <div>
                <div></div>
                <div></div>
            </div>
        </div>
         <div class='blue about'>
            <div>
                <div></div>
                <div></div>
            </div>
        </div>
         <div class='green gallery'>
            <div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class='yellow food'>
            <div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
</div>

CSS

div {}

#nav {list-style-type:none; position:fixed; top:20px; left:20px }
#nav li {display:inline; cursor:pointer;}
#nav li a {font-family:Tahoma; text-transform:uppercase; font-size:16px; text-decoration:none; padding:5px 10px; background:#eee;}



#wrap { width: 1800px; margin:50px;}
#wrap > div {width:250px; overflow:hidden; display:block; margin-right:20px; float:left;}
#wrap > div > div {width:500px;}
#wrap > div > div > div {width:250px; height:500px;opacity:0.5; display:block;float:left;}
#wrap > div > div > div:first-child {opacity:1.0; height:250px;}
.red > div > div {background:red;}
.blue > div > div {background:blue;}
.green > div > div {background:green;}
.yellow > div > div {background:yellow;}

JavaScript

$("#nav li a").click(function() {
    var aclass = $(this).attr("class");
    $('#wrap').find('> div').siblings('.open').animate({
        width: '250px'
    }).removeClass("open");
    $('#wrap').find('.' + aclass).addClass('open').animate({
        width: '500px'
    }, function(){
        $("body").scrollTo($(this), 800, {offset:-20, axis:'x'})
    });
   
});