优化滑动/可折叠侧边栏

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