javascript - 绝对定位的子元素在父容器的动画过程中被剪裁

Question

我创建了一个在悬停时增长的盒子。该框内有一个缩略图，它是 position:absolute 并且比父框大。

当我为父容器的宽度或高度设置动画时，缩略图被裁剪为父容器的大小，但仅限于动画期间。

这里有一个简单的演示(在 mac 上的 chrome/safari/ff 中测试): http://jsfiddle.net/Q2BPx/3/

我做错了什么？

Answer 1

我不知道你做的任何事情本身都是“错误的”。

当 animate 方法运行时，jQuery 使用内联样式来设置动画每一帧的宽度。它还将样式“溢出:隐藏”添加到内联样式中。

您可以通过添加以下内容来破解扩展器的 css:overflow: visible !important;

这将防止内联溢出:隐藏使您的缩略图被裁剪。

但是，您可能想查看 jQuery 代码以了解 animate 为什么使用溢出设置。

或者，至少测试您的页面以确保您没有通过使用 overflow: visible !important; 引入异常；