Efeito igual ao site skitter-slider.net

Efeito igual ao site skitter-slider.net

by Angelo Rogério Rubin

HTML

<div class="nav">
    <ul>
        <li><a href="div1" id="link1">Link 1</a></li>
        <li><a href="div2" id="link2">Link 2</a></li>
        <li><a href="div3" id="link3">Link 3</a></li>
    </ul>
</div>
<div class="content bg-color-one" id='div1'></div>
<div class="content bg-color-two" id='div2'></div>
<div class="content bg-color-three" id='div3'></div>

CSS

body {
    font-family: Verdana;
}
#div2, #div3 {
    display: none;
}
.nav {
    border: 1px solid #CCC;
    padding : 20px;
    margin: 0 0 5px 0;
}
.nav li {
    display: inline;
    background-color: lightgreen;
    padding: 5px 10px;
}
.content {
    height: 300px;
}
.bg-color-one {
    background-color: lightgray;
}
.bg-color-two {
    background-color: lightblue;
}
.bg-color-three {
    background-color: salmon;
}

JavaScript

$(document).on('click', 'a', function(e){
    e.preventDefault();
    var url = $(this).prop('href');
    var id = url.substring(url.lastIndexOf('/') + 1);
    console.log(id);
    $('.content').not('#'+id).hide();
    $('#'+id).animate({
        width : 'toggle'
    }, 1000);
});