jQuery：有没有办法在没有任何文本移动的情况下为div的宽度设置动画？

Question

我正在使用jQuery缩小div的宽度，如下所示：

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

虽然它正在缩小，但文字会回流以适应更薄的div。我不希望这种情况发生 - 我希望文本保持不变，只是随着宽度减小而从视图中消失，就像你$('div#foo').slideUp()那样。

是否有CSS技巧或其他方法使其有效？

Answer 1

现场演示： http://jsfiddle.net/AvYyT/1/

诀窍是使用内部容器并将其设置为外部容器的宽度。

Answer 2

您可以使用jQuery将内容的宽度设置为div，将overflow:hidden添加到div，然后再缩小宽度。

像（未经测试，可能有拼写错误，但你明白了......）：

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

但这取决于div的内容，如果里面有图像，这将无效。

Answer 3

一种选择是在white-space: nowrap;上使用div。唯一的问题是，如果您有一长串文本，则必须手动添加换行符。

Answer 4

在你的div CSS中，使用：overflow-x: hidden; overflow-y: hidden;

Answer 5

尝试给它vertical-align:top