Question

I am trying to use a fadein+slidedown script I found here on stackoverflow.

$('#topmenu').animate({
    "height": "toggle",
    "opacity": "toggle" 
}, "slow");

$('.post').delay(1000).animate({
    "height": "toggle", 
    "opacity": "toggle" 
}, "slow");

For some reason the two animations ARE PLAYING BACKWARDS here… can you help me figure the reason out?

Answer 1

#topmenu and .post need to be initially hidden to be able to fade in and slide down when using the toggle option. For example,

#topmenu, .post {
  display: none;
}

In your case, since the elements are initially visible, the toggle option will fade and slide them out.

You can also use .hide() before the animations. But, I still believe using CSS is the optimal solution here.

Note: You can make use of "show" and "hide" instead of "toggle" if you are applying a one-time effect.