JQuery slideLeft animation without text packaging

Question

I would like to show / hide a paragraph of text using jQuery from left to right.

I use

$('#text').animate({ width: ['toggle', 'swing'] }); 

However, I see the paragraph wrapping up when the animation happens. And it looks ugly.

See this js fiddle for an example of an unwanted effect.

How do you recommend getting the same effect, but without packaging? (Like .slideUp() / slideDown() ) ...

Thanks for any help

Answer 1

You need to set overflow: hidden in the container, and then apply the animation to the container.

Updated script with fix here

Answer 2

Try the following:

CSS

 #wrap{ width:200px; overflow: Hidden; } #text{ width:200px; } 

Script:

 setTimeout( function(){ $('#wrap').animate( // Changed to slide the wrap instead of the #text { width: ['toggle', 'swing'] }) }, 1000); 

http://jsfiddle.net/RDsqy/2/