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 remend getting the same effect but with no wrapping? (Like .slideUp() / slideDown())...

Thanks for any help

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 remend getting the same effect but with no wrapping? (Like .slideUp() / slideDown())...

Thanks for any help

• javascript
• jquery
• html
• animation

2 Answers 2

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

Updated fiddle with fix here

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/RDsqy/2/