2つのdivs - 幅と左の属性をアニメーション化するJQuery

Question

私はコンテナ内に2つのdivを持つレイアウトを持っています。here's a JSFiddle of the layout私はディスプレイから右の列をアニメートし、左の列を100％の幅に調整して新しく作成された領域を塗りたいとします。これは、私が持っているjQueryコードです。

if ($('div#right').offset().left > $('#container').width()) { 
     // Bring right-column back onto display 

      $('div#right').animate({ 
      left:'0' 
      }, 600); 

      $('div#left').animate({ 
      width:'50%' 
      }, 200); 
     } else { 

// Animate column off display. 
      $('div#right').animate({ 
      left:'+50%' 
      }, 600); 

      $('div#left').animate({ 
      width:'100%' 
      }, 1000); 
     } 

コンテナのオーバーフロー-xが非表示に設定されています。私が抱えている問題は、左の列を100％に拡大すると、右の列が左の列の下に表示されます。なぜなら、それでもコンテナ内の領域が占有され、左の列は徐々に100％コンテナの幅。

これを達成する方法についてのご意見はありますか？

Answer 1

$('#container').click(function(){ 
    if (parseInt($('div#right').css('right'),10) < 0) { 
      // Bring right-column back onto display 
       $('div#right').animate({ 
        right:'0%' 
       }, 1000); 

       $('div#left').animate({ 
       width:'45%' 
       }, 600); 
      } else { 

    // Animate column off display. 
       $('div#right').animate({ 
        right:'-45%' 
       }, 600); 

       $('div#left').animate({ 
       width:'100%' 
       }, 1000); 
    } 

}）;

これは優れたソリューションです。浮動小数点の代わりに絶対配置を使用してください：jsFiddle：http://jsfiddle.net/YNAJZ/38/