Search code examples
jqueryjquery-uislidejquery-effects

Slide subsequent elements as well when using jQuery Ui's slide effect

I'm looking for a way to toggle an element's visibility by sliding it in while smoothly pushing away those elements that are in the target position.

Until now I tried both slide effects from jQuery and jQuery Ui and it seems like I need a blend of those two.

Whereas jQuery's slide stretches the element in question I'd rather want it to slide in and out like in a container with overflow: hidden (like jQuery Ui does). Unfortunately, jQuery Ui does not reposition neighboring elements during the animation but makes them jump to their place once the animation is finished.

I have created a Fiddle to show you what I mean. My question is: is there a way to have the slide in jQuery Ui without the subsequent element jumping to its place but instead move there smoothly?

Thank you very much for your advice!

Solution

  • You could add a containing DIV and set its height :

    http://jsfiddle.net/Q2dSZ/4/