jQuery slideDown is not smooth

javascript jquery html slidedown
user13746 picture user13746 · May 6, 2012 · Viewed 28.5k times · Source

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

Gregg B picture Gregg B · May 6, 2012

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.

Related questions

jQuery slideDown() animation not working

I'm trying to get jQuery's slideDown() animation to work, but in my case the text that should slide down, just appears .. How do I make it appear with the animation in place too ? I tried manually specifying the speed too, …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I know which radio button is selected via jQuery?

I have two radio buttons and want to post the value of the selected one. How can I get the value with jQuery? I can get all of them like this: $("form :radio") How do I know which one is …

Read More