Animate() problem

my problem is after animate(), the “+1” will go back to it’s original position, how to prevent it from happening.
My goal is to make it rising 20px, and at right there, then fadeOut , Not like rising 20px → go down → fadeOut

here is my code:

It’s better if you can create a working demo on CodePen or similar, so that people can test the code.

It seems that you are making the element rise by 20px then you say this ‘.css(‘height’,’‘)’ which resets the height back to what it was so it slides back down again while it fades out.

Just remove the ‘.css(‘height’,’‘)’ portion and it will fade out at the top.

If I do not reset the height, and then click the same button again, the +1 will go up another 20px from where it stopped. Even if I remove the css(‘height’,‘’), ‘+1’ will still drop down and fadeout.
My solution is to use fadeOut(1) to make it fadeout fast to make the drop down action nearly not seeable.

You didn’t give enough detail to answer the question as you said you wanted it to fade out the top but failed to mention that you wanted the element to return to the bottom ready for the next time :smile:

Rather than fade the element out quickly just stick the css height in the callback of the fadeout routine and the height will only be reset once the fadeout animation is finished.

e.g.

.fadeOut( “slow”, function() {
// Animation complete.
$(this).css(‘height’,‘’)
});

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.