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

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

width resize animation jquery

user113716 · 技术社区 · 17 年前

在下面的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 回复 | 直到 17 年前

user113716 17 年前

关于这是否应该是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 17 年前

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

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

Keeper 17 年前

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

ichiban 17 年前

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

推荐文章

summerrain · “auto”是HTML属性“height”和“width”的有效值吗?

1 年前

Hiyanneri · CSS-如何使用CSS增加下拉列表的宽度?

2 年前

Joshua Fermin · 内联样式反应元素宽度

8 年前

aaaaa · 减少多重条形图R中的条形宽度

8 年前

user7937949 · 无自动的CSS宽度转换

8 年前

shioko · 为什么x%在Visual Studio中不是属性“width”的有效值?

8 年前

James Pointer · 锚标签未填充高度和宽度

8 年前

Tom O'Sullivan · 如何确定屏幕高度和宽度

8 年前

MrO · 如何使div的宽度与屏幕高度相同?

8 年前

user176105 · 调整大小时保持Jquery给定的宽度

8 年前