CODEWITHSUNDEEP
javascriptjqueryanimationdhtmlslidedown
Tom
Tom

Reputation: 556

When doesn't jQuery slideDown work but slideUp does?

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.

Upvotes: 2

Views: 2014

Answers (2)

Tom
Tom

Reputation: 556

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?

Upvotes: 3

cbayram
cbayram

Reputation: 2259

You should make your call to slideDown upon the completion of your slideUp animation:

$el.slideUp(1).slideDown('slow')

should be

$el.slideUp(1, function(){
  $el.slideDown('slow');
});

Upvotes: 0

Related Questions