0

コンテナ内に2つのdivがあるレイアウトがあります。これが、レイアウトのJSFiddleです。右側の列をディスプレイからアニメーション化し、左側の列を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);
        }

コンテナoverflow-xは非表示に設定されています。私が抱えている問題は、左の列を100％に拡張すると、右の列が左の列の下に表示されることです。これは、コンテナ内のスペースをまだ占有しているためです。左の列は、徐々に100％のスペースを占めるようになっています。コンテナの幅。

これを達成する方法について何か提案はありますか？

4

1 に答える 1

0 
 $('#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/

于 2012-04-30T16:54:33.683 に答える