Question

Forgive me if this has been addressed before, couldn’t find anything.

I am animating a content bar that that has children absolutely positioned outside it (via negative margins). The idea is that the children will animate with the bar as it expands.

What happens is as soon as the animation starts the children disappear, and then reappear when the animation is complete. It’s as if the animation need to complete before the browser knows where to put the children.

I have uploaded a really simple example here, all scripts included on page:
http://www.ismailshallis.com/jdemo/

What is actually happening? What are my options to work around this?

Many thanks in advance,

Belinda

Answer 1

When jquery is animating either the height or width of an element, it will automatically set overflow: hidden on the element while the animation is happening. Since your child element is positioned outside, it’s technically part of the overflow. The comment in the jquery source near the code that does this says “//Make sure that nothing sneaks out.” If you include the uncompressed jquery source and comment out line 4032 of jquery-1.3.2.js (inside the animate function):

//this.style.overflow = "hidden";

You will see that the animation works the way you intended. I’m not sure of a workaround other than modifying the jquery source by commenting out that line above.