0

我有一个容器内有两个 div 的布局，这是 layout 的 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);
        }

容器溢出-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 回答