Question

Hi im trying to add some effects to divs on my website using Jquery. I want some elements to expand out on load and then when the user leaves the page I want the divs to close the opposite way the opened. My problem is that when the animations play (both opening and closing) the text seems to go on new lines whilst the box is getting smaller, how do I stop that from happening?

I can show you an example on this website
See Example 3 (Collapse left) – Note the Moving Text

http://www.adipalaz.com/experiments/jquery/expand_collapse_different_directions.html

Answer 1

There is a way to achieve this. You need to have an inner and outer container for each object. You then move the inner container left or right and have the outer container’s overflow property set to hidden.

Check out this demo