Question

I want to hide an element by sliding it up. For example, see this demonstration:

http://jsfiddle.net/HHgJU/

When the red box slides up, decreasing in height, you’ll notice that the position of the text below it does not change until the slide is complete and the red box is “display:none.”

Instead, I would like the text to move up to take the space in the page that is now available as the height of the red box continues to decrease.

How can I do this?

Ultimately, I’m trying to slide left to hide while simultaneously fading its opacity out to 0 at the same time. Bonus points if you can tell me how to do this in addition to answering my question 🙂

Answer 1

I updated your fiddle (click here) with a manual animation of the height to do exactly what you described. Basically, I’m using the .animate() method to animate the height to 0px and then changing display:none in the callback. The text below slides up as the height shrinks.

And here’s an updated fiddle (click here) with your bonus question. Instead now just animating width and opacity.

And as an added bonus, here’s both together!