優化滑動/可折疊側邊欄

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