且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

绝对定位的子元素在父容器的动画期间被剪裁

更新时间:2022-10-21 09:57:32

我不知道你在做任何错误本身。



当运行animate方法时,jQuery使用内联样式来设置每个框架的动画。它还将风格overflow:hidden添加到内联样式中。



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

这将防止内嵌溢出:隐藏以缩略您的缩略图。



但是,您可能想要查看jQuery代码看看为什么animate正在使用溢出设置。



或者,至少要测试您的网页,以确保您没有使用overflow:visible!important;


引入异常

I created a box that grows on hover. The box has a thumbnail inside it that is position:absolute and bigger than the parent box.

When I animate the width or height of the parent container, the thumbnail gets cropped to the size of the parent, but only during the animation.

See here for a simple demo (tested in chrome/safari/ff on mac): http://jsfiddle.net/Q2BPx/3/

What am I doing wrong?

I don't know that you are doing anything "wrong" per se.

When the animate method is running jQuery uses inline style to set the width for each frame of the animation. It also adds the style "overflow: hidden" into the inline style.

You can hack the css of expander by adding: overflow: visible !important;

This will prevent the inline overflow: hidden from making your thumbnail being cropped.

But, you might want to look into the jQuery code to see why animate is using the overflow setting.

Or, at least test your page to make sure you have not introduced an anomaly by using the overflow: visible !important;