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

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

width resize animation jquery

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 年前

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');
});

peirix 16 年前

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

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});

Keeper 16 年前

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

ichiban 16 年前

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

推荐文章

mikko · SwiftUI如何在不同堆栈中实现同一视图的平滑动画

7 月前

Nejib Afdhal · 如何在带有类名的react native中使用顺风动画?

7 月前

user54097 · 滚动菜单项上的导航栏动画文本徽标

1 年前

Simplicissimus · 如何使用javascript为svg转换计时

1 年前

LetsBeHappy · 高CPU的圆形渐变动画

1 年前

Toniq · css从上到中心设置动画

1 年前

Ongky Denny Wijaya · 绘制y=omega*x^2的动画,其中omega从-3到3不等

1 年前

Duck · 如何设置菜单从圆形到椭圆形的动画?

1 年前

MR Lappy · 提要动画最后出现空白

1 年前

Nithin Sai · 如何设置draggableScrollableSheet及其内容的动画?

1 年前