jquery滑動divs

Question

我需要滑動一個div的內容：在鏈接點擊時，div應該從右向左滑動，當我點擊第二個鏈接時，可見的div應該滑出右側，div與新的內容應從右到左滑出...... 我使用的是歷史插件作爲我的網頁應該dinamicaly加載： jQuery的（文件）。就緒（函數（$）{

 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; 
     }); 

}); 

的HTML是這樣的事情：

<div class="leftside"></div> 
<div class="navigation"> 
    <div class="main-nav"> 
    <ul> 
    <li><a href="#page1">link 1</a></li> 
    <li><a href="#page2">link 2</a></li> 
    </ul> 
    </div> 
</div> 

JS代碼工作，但噸他的div並不像我上面所描述的那樣滑動......你有什麼想法該怎麼做？

Answer 1

如果有人有興趣，我找到了解決辦法 - 很簡單：

$('.main-nav a').live('click', function (e) { 
    var url = $(this).attr('href'); 
    url = url.replace(/^.*#/, ''); 
    if ($('.leftside').is(':visible')) { 
    $('.leftside').stop().animate({ 
     left: '360px' 
    }, { 
     duration: 2000, 
     specialEasing: { 
     width: 'linear', 
     height: 'swing' 
     } 
    }).animate({ 
     left: '0px' 
    }, 1000); 
    } else { 
    $('.leftside').stop().animate({ 
     left: '0px' 
    }, 1000); 
    } 
    $.history.load(url); 
    return false; 
});