代码之家  ›  专栏  ›  技术社区  ›  user113716

jQuery:div在动画之后会弹出到完整大小

  •  2
  • user113716  · 技术社区  · 16 年前

    在下面的jQuery示例中,我将一个div放在另一个div中。当我将内部div设置为宽度为0时,外部div(具有绝对定位)的宽度也随之减小。

    这是需要的。

    问题在于,动画完成后,外部div会弹回到其原始大小。这是预期的吗?我怎样才能避免这种情况发生?

    实例

    html:

    <div class="outer"><div class="inner">innerContent</div></div>
    

    css:

    div.outer {
        position: absolute;
        padding: 10px;
        background: purple;
    }
    
    div.inner {
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        background: orange;
        clip: auto; overflow: hidden;
    }
    

    javascript:

    $('.outer').click(function() { 
        $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
    });
    
    4 回复  |  直到 16 年前
        1
  •  4
  •   user113716    16 年前

    关于这是否应该是jquery或webkit或两者的bug修复请求的任何意见。

    $('.outer').click(function() { 
        var innerWidth = $('.inner').outerWidth();
        var outerWidth = $('.outer').width();
        var theWidth = outerWidth - innerWidth;
        $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
        $('.outer').animate({width: theWidth}, 'slow');
    });
    
        2
  •  1
  •   peirix    16 年前

    动画完成后,您是否尝试将outerbox宽度设置为0?

    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
      $('.outer').css("width", 0);
    });
    
        3
  •  0
  •   Keeper    16 年前

    对于我来说,在Firefox3.0.10中使用Ubuntu9.04中的jQuery1.3.2,这非常有效。 可能是与页面中其他html元素的某种交互?

        4
  •  0
  •   ichiban    16 年前

    在我的测试中,这在IE、FF和Opera中运行良好,但会产生您在Chrome和Safari中提到的bug。