Using ScrollTo plug-in to scroll divs horizontally

What I'm trying to achieve is to make 4 divs scroll horizontally (f开发者_如何学Crom left to right) within a "window-space". I've included the easing plugin as well, and it works perfectly when you click the "TopLinks" link and the divs move up and down... However, the easing disappears completely when trying to scroll from left to right.

Ive wondered if it had anything to do with my CSS, but Im not sure. Any help to get this working would be greatly appreciated. Here is my code:

HTML

<ul id="topLinks">
    <li><a href="#contact">Contact</a></li>
    ...
    <li><a href="#home">Home</a></li>
</ul>
....
<div id="slider">
    <div class="active" id="home">
    //code here
    </div>
    ...
    <div class="active" id="contact">
    //Fourth & last div
    </div>
</div>

CSS

#slider { 
    position:relative;
    width:530px;
    height:380px;
    margin:60px auto auto 0px;
    overflow:hidden;
}

div.active {
    float:left;
    text-align:justify;
    line-height:30px;
    width:530px;
    height:380px;
    margin: 0px 0px 5px 0px;
    padding:0px;
}

JAVASCRIPT

$(document).ready(function() {
    $('#topLinks li a').click(function() {
        $('#slider').scrollTo( $(this).attr('href'), 2500, {easing:'swing', axis:'x'});
    });
});

I'll throw it on jsfiddle as well, so you have a working demo. http://jsfiddle.net/BftMr/

You need to wrap each of the items within the slider div with another div which spans the width of each of the items it contains. (In this case I hardcoded it to 3000px but you would probably want to calculate this dynamically)

Here is a working example:

http://jsfiddle.net/NdSyB/

Hope this helps, if it does please mark it as answered.