When doesn't jQuery slideDown work but slideUp does?

Question

I am having trouble with slideDown. Instead of neatly sliding down the element starts 'shaking' and than appears straight away without animation. SlideUp on the other hand works flawlessly.

I made a jsFiddle: http://jsfiddle.net/4x4PK/1/

The problem occurs when you click the + button. × button works just fine.

There are some JS pluggins, the on.('click' ...) code in question is all the way down at the bottom.

Answer 1

Ok, seems like I found the solution. The problem was I think that the slideDown function needs to know the height of an element before the animation starts (to know the endpoint of the animation).

When I add the element with after() it's too soon to tell it's height.

• the element has to be already inserted otherwise it's height is zero.
• the element must not be already visible

Finally I found this working solution:

$(this).closest('.smoking-rate').after( $el );
$el.hide().slideDown()

Can somebody confirm, the height is the reason it didn't work?