JQuery實現內容左側滑動進入效果

<!-- 為了更簡單直觀的查看，這里我們只書寫關鍵html代碼　 //-->
<ul id="navlist">
  <li><a href="#">GBtags</a></li>
</ul>

<!-- 這里將出現滑動加載內容 -->
<div id="headdesc">
  
</div>

<div id="maincontent">
  
</div>


<!-- 引用Javascript類庫，使用http://cdn.gbtags.com來選擇需要引用的JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

/*Javascript代碼片段*/

$(function(){
  $('#navlist a').click(function(){
    //這里針對navlist中的每一個項目，添加一個click事件
    
    /* 
      主要的滑動效果實現機制就是添加內容到容器中
      使用jQuery的.css方法定義left屬性為當前容器寬度的負數，這樣當加載內容后，無法看到
      最后調用.animate方法來設置left屬性為０，這樣生成一個滑動效果
     */
    
    var $main = $('#maincontent'),
        $headdesc = $('#headdesc'),
        headdesc = '導航說明文字',
        content  = '頁面主體內容';
        
        
        $headdesc
          .html(headdesc)
          .css({left:-$headdesc.outerWidth()})
          .stop()
          .animate({left:0});  
        
       //同樣方式處理頁面內容滑動
       $main
       .html(content)
       .css({'left':-$main.outerWidth()})
       .stop()
       .animate({left:0});
    
  });
});