jQuery slideDown is not smooth

Question

I have this little jQuery slideDown effect http://jsfiddle.net/Gg4eP/2/

But the animation isn't smooth? What I am doing wrong?

Thanks for your time.

Answer 1

You just need to add the width to each expandable div.

http://jsfiddle.net/BpMam/

To explain:

jQuery doesn't know the dimensions of your hidden div until it's displayed. So when it's clicked on it actually pulls it out of position to measure it before quickly replacing it. This often has the side effect of causing some jumpiness. Setting the width on the element prevents jQuery from pulling it out of position.

Answer 2

Some browsers don't particularly like text that is automaticly wrapped when animating, and it gets a little jerky when it tries to figure out the height of the element.

Try formatting the text to fit the element and see if that helps.

I actually did it for you, check if this FIDDLE solves it ?

Would probably work to give the slided elements a fixed height aswell ?

FIDDLE