優化滑動/可摺疊側邊欄

Question

我爲這個項目定製了一個可摺疊側邊欄 （http://devheart.org/articles/jquery-collapsible-sidebar-layout/）但是它看起來有點時髦而且不正確。

請看看這裏的項目：

http://jsbin.com/oliluz/45

側邊欄似乎正確的動畫，但#mainContent不與側邊欄動畫一起。它僵硬而苛刻地進行切換。

此外，如果我添加我的代碼的方式進行優化。

謝謝！

Answer 1

#mainContent的新寬度由CSS確定;這就是爲什麼它不是動畫。爲了動畫mainContent的寬度爲好，請嘗試以下操作：

1. 從CSS中刪除以下行：

   #wrap.sidebar #mainContent { margin-right: 270px; } 
   

2. 修改JavaScript添加相應的動畫：

   // Variables 
   var objMain = $('#wrap'), objSidebar = $('#sidebar'); 
   
   var objContent = $('#mainContent'); // << ADDED 
   
   // Show sidebar 
   function showSidebar(){ 
       objMain.removeClass('nosidebar'); 
       objMain.addClass('sidebar'); 
       objSidebar.animate({ 'right' : '0'},'slow'); 
       objContent.animate({ 'margin-right': 270}, 'slow'); // << ADDED 
       $.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 }); 
   } 
   
   // Hide sidebar 
   function hideSidebar(){ 
       objMain.removeClass('sidebar'); 
       objMain.addClass('nosidebar'); 
       objSidebar.animate({ 'right' : '-254px'},'slow'); 
       objContent.animate({ 'margin-right': 0}, 'slow'); // << ADDED 
       $.cookie('sidebar-pref2', null, { expires: 30 }); 
   }