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

标签 javascript jquery css

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

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

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

我做错了什么?

最佳答案

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

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

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

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

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

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

关于javascript - 绝对定位的子元素在父容器的动画过程中被剪裁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10386946/

相关文章:

javascript - 在 anchor 标记内调整 Window.Open 的大小

php - 如何使用 jquery 或 javascript 为 ajax url 构造查询字符串?

javascript - 在 View 中解析由 Controller 设置的 json 字符串

javascript - 在 Highcharts 中左右对齐文本

css - Ruby on Rails 图像显示

javascript - '!= ' 和 '!== ' 有什么区别

javascript - 如何为绘制的 Canvas 形状设置 id?

javascript - 在react js应用程序上动态地将参数传递给Web服务

javascript - 将 clojurescript 集成到 javascript 框架中

HTML 和 CSS 无法将 DIV 与 I 分开