Question

我有一个容器内有两个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);
        }

容器overflow-x设置为hidden。我遇到的问题是将左列扩展到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/

JQuery动画2个div - 宽度和左边属性

1 个答案: