Visit Sponsor

Written by 3:42 pm Javascript

Solution for JQuery Animation Content Bleeding Through

Here is a quick tip for those using animations with the JQuery library.

I just tracked down a weird issue with a JQuery Animation. The functionality of the page was very similar to an Accordion. Click an image, the content collapses using the slideDown() function. Click again, the content expands using slideUp().

The structure of the content was a table wrapped inside a container DIV:

Content la la la la la

Not rocket science, right? This effect rendered flawlessly in Firefox shrinking and hiding the content incrementally. In I.E. 6, even though the containing div shrank incrementally, the content was visible up until the end of the animation, ruining the effect.

Through Divide and Conquer, I discovered the table had a css rule “position:relative”. Removing this rule made the animation behave without bleeding through.

Visited 1 times, 1 visit(s) today
[mc4wp_form id="5878"]
Close