jquery - jQuery：动画后div弹回全尺寸

Question

在下面的 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');
});

Answer 1

看起来如果我抓住“外部”div的宽度和“内部”div的outerWidth，然后从“内部”div的outerWidth中减去“外部”div的宽度，并将“外部”宽度设置为动画结果同时将“内部”设置为 0，它可以工作。

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

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

Answer 2

动画完成后是否尝试将外框宽度设置为 0？

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

Answer 3

对于我在 Firefox 3.0.10 中使用 Ubuntu 9.04 中的 jQuery 1.3.2 来说，这非常有效。可能是与页面中其他 html 元素的某种交互？

Answer 4

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