具有绝对父级的 div 的 jQuery 动画宽度

Posted 2023-05-08

【中文标题】具有绝对父级的 div 的 jQuery 动画宽度

【英文标题】：jQuery animating width of a div with an absolute parent

【发布时间】：2011-08-04 13:39:13

【问题描述】：

我正在尝试为div 的宽度设置动画，该宽度由位于absolute 的父元素包裹到它自己的父元素。显示example of what I mean 可能更容易解释。

应该发生的是，当单击红色矩形时，绿色框的宽度会动画到某个宽度，而红色矩形位于它旁边。这一切在 IE 和 Firefox 中运行良好，但在 chrome 中运行时，红色矩形跳到绿色框下方。所以我只是想知道我是否做了一些愚蠢的事情，或者是否有人知道我可能做错了什么？

谢谢，

【问题讨论】：

给父母一个足够大的宽度以适应动画似乎可以解决它，你试过了吗？

【参考方案1】：

没有错，只是浏览器认为没有足够的可用空间让两个元素并排显示:)

#banner-wrapper 
    min-width: 100%;

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

【讨论】：

啊！如此简单的修复。谢谢！

【参考方案2】：

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

您可以按照 x10 的说明在 CSS 中强制设置 div 的宽度，或者在单击处理程序中使用 javascript 更改其宽度，以便仅在需要时打开它。

【参考方案3】：

如果你在#banner-wrapper 周围加上一个边框，你会看到会发生什么。

看起来 chrome 不会在其内容更改大小后重新调整元素的大小（因此它会导致浮动元素中断，因为它们不适合一行）.. p>

另一种方法是将display:inline-block 用于内部元素。

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