スライド/折りたたみサイドバーを最適化

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