jquery sliding divs
<p>I need to slide a div with a content:  on link click, the div should slide out from right to left and when I click on second link, the visible div should slide out to the right and a div with a new content should slide out from right to left ... 
I use a history plugin as my pages should be loaded dinamicaly:
jQuery(document).ready(function($) {</p>

<pre><code>        function load(num) {
            $('.leftside').load(num +".html",'',showNewContent());
        }

        $.history.init(function(url) {
            load(url == "" ? "page1" : url);
        });
        function showNewContent() {

            $(".leftside").css('left', function(){ 
                return $(".rightside").offset().left - $(".navigation").offset().left; })
             .animate({"left":"0px"}, {
                                        duration: 2000,
                                        specialEasing: {
                                          width: 'linear',
                                          height: 'swing'
                                        }
                                    });  
        }
        function hideLoader() {
            $('.leftside').fadeOut('normal');



        }
        $('.main-nav a').live('click', function(e) {
            var url = $(this).attr('href');
            url = url.replace(/^.*#/, '');
            $.history.load(url);
            return false;
        });

});
</code></pre>

<p>the html is something like this: </p>

<pre><code>    &lt;div class="leftside"&gt;&lt;/div&gt; 
&lt;div class="navigation"&gt;
    &lt;div class="main-nav"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#page1"&gt;link 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#page2"&gt;link 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>the JS code works, but the divs doesn't slide as I described above ... do you have any idea how to do that?</p>
