jQuery animation slideLeft without text wrapping

Question

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

I'm using

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

However I am seeing that the paragraph wraps as the animation is happening. And it looks ugly.

See this js fiddle for an example of the undesired effect.

How would you recommend getting the same effect but with no wrapping? (Like .slideUp() / slideDown())...

Thanks for any help

Answer 1

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

Updated fiddle with fix here

Answer 2

Try this:

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/