I created this site at work, http://eco-spirit.ca/, (the IE version isn’t done yet, so it’s best viewed in Chrome/Safari/Firefox), and when you click on the icons at the top I use the .slideDown() method to show a small blurb. It all works the way the boss asked but I noticed right after the animation, the text bumps up about 10-15 pixels, as if the margin is changing. And it does the same when the .slideUp() method is called.
Does anyone know why this would happen?
(ps I didn’t design this site I just programmed it)
When the HTML elements are being animated, they have a display style of ‘block’ and are absolutely positioned. The margins of these elements aren’t included in the calculations of the surrounding elements during animation. Once the animation is complete, their original display and position attributes are restored.
The best way to handle this is to put the margins for these elements in a container element, that is not animated.