jQuery动画宽度的div与绝对父

Question

我想动画的宽度div这是由父母元素定位absolute它的父母。通过显示example of what I mean可能更容易解释。

应该发生的事情是，当点击红色矩形时，绿色框的宽度会动画到一定的宽度，而红色矩形则会与其相邻。 IEFirefox这一切都很好，但是当它在铬中运行时，红色矩形跳到绿色框下方。所以我只是想知道我是否做了一些愚蠢的事情，或者如果有人知道我可能做错了什么？

感谢，

Answer 1

没有错，它只是浏览器认为还有下一个被显示给对方:)这两个元素没有足够的自由空间

#banner-wrapper { 
    min-width: 100%; 
} 

小提琴链接：http://jsfiddle.net/K2UbQ/8/

Answer 2

问题是由于浏览器认为容器div不够大而不能包含这两个元素而引起的。这是由你的绝对定位造成的。如果您必须为此使用绝对定位，则需要确保div＃banner-wrapper足够大以适应内容的增长。

您可以在CSS中按照x10的说法强制div的宽度，或者在click处理程序中使用JavaScript更改其宽度，以便只在需要时才打开它。

Answer 3

如果您在#banner-wrapper周围放置边框，您将看到会发生什么情况。

它看起来像Chrome不重新大小，一旦其内容的元素改变大小（，因此它会导致浮动元素打破，因为他们不单行适合）..

替代将使用display:inline-block作为内部元素。

例子：http://jsfiddle.net/K2UbQ/10/