jQuery：动画后div弹回全尺寸答案

【问题标题】：jQuery: div pops back to full size after animationjQuery：动画后div弹回全尺寸
【发布时间】：2010-10-29 13:47:50
【问题描述】：

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

【问题讨论】：

在 Firefox 和 IE 中都适用于我。

标签： jquery animation resize width

【解决方案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');
});

【讨论】：

我将其报告为 jQuery 错误。 jQuery 的重点是在浏览器之间规范这些事情。
顺便说一下，在这个例子中，我可以将外部设置为 0，但在我的实际页面中，内部 div 旁边还有其他内容必须保持可见，因此将外部设置为 0实际上不是一个选项。
Nosredna，好点子。只是预感它可能也会导致更快的修复。
既然你解决了自己的问题，你应该继续接受你自己的答案。
是的，只是等待接受我自己的答案所需的 48 小时。不过谢谢你的提醒。

【解决方案2】：

你有没有试过在动画完成后将外框宽度设置为0？

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

【讨论】：

嗯，这样的作品。它实际上创建了一个口吃，其中外部 div 在缩小到 0 之前仍会扩展为全尺寸一秒钟。

【解决方案3】：

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

【讨论】：

我正在使用基于 webkit 的浏览器。刚刚在 Mac OS X 上尝试了 Firefox，它运行良好，所以它一定是 webkit 的问题。我发布的示例是我页面的一个极其简化的版本。无论是否存在其他元素，行为都是相同的。

【解决方案4】：

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

【讨论】：

是的，看起来 webkit 是罪魁祸首。希望我能找到合适的解决方法。