jQuery: Is there a way to animate a div's width without any text movement?

I'm using jQuery to shrink a di开发者_如何学JAVAv's width, like this:

$('div#foo').animate({width: 0},someSpeed);

While it's shrinking, the text reflows to fit the ever-thinner div. I don't want this to happen - I want the text to stay as it is, just disappearing from view as the width decreases, as happens if you do $('div#foo').slideUp().

Is there a CSS trick or some other way to make this work?

Live demo: http://jsfiddle.net/AvYyT/1/

The trick is to use an inner container and set its with to the width of the outer container.

One option is to use white-space: nowrap; on the div. The only problem there is that you will have to manually add line breaks if you have a long body of text.

You can use jQuery to set the width of the content to the with of the div, add overflow:hidden to the div and only then reduce the width.

Something like (untested, could have typos, but you get the idea...):

var el = $('div#foo');
el.children().each(function() {
  $(this).width(el.width());
});
el.css('overflow', 'hidden').animate({width: 0}, someSpeed);

But it depends on the contents of the div, this would not work if there are images inside it.

In your div CSS, use: overflow-x: hidden; overflow-y: hidden;

try giving it vertical-align:top