Automatic switching to overflow hidden during animation
Hello all,
I have two questions regarding this portion of the animate() method
source code:
/******************************/
for ( p in prop ) {
[...]
if ( ( p == "height" || p == "width" ) && this.style ) {
[...]
// Make sure that nothing sneaks out
opt.overflow = this.style.overflow;
}
}
if ( opt.overflow != null )
this.style.overflow = "hidden";
/******************************/
I might be wrong (really), but to me this means that *whenever* an
animation is executed on an element's width or height, the element wil
get overflow:"hidden", no exception (this.style.overflow can only
return "visible", "hidden" or an empty string, and the three of them
are different from null, if I'm not wrong...)
My problem today is related to this issue. I want to animate the size
of a div with a child div inside it, set to overflow in its top-left
corner, (kind of like the close button on Fancy Zoom's popups -
http://www.cabel.name/2008/02/fancyzoom-10.html). With jQuery animate
(), the parent div gets overflow:"hidden" and therefore the inside div
is clipped during the anim... If I comment "opt.overflow =
this.style.overflow" in jQuery's source code, everything runs as
expected, no clipping.
So, my two questions are:
1) what's the use of this automatic swtching to overflow:"hidden"?
2) I can't think of a way to keep my element's overflow to "visible"
during its animation (without having to comment the above mentionned
line on jQuery source...). Any idea, anyone?
Thanks!