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

【问题标题】：jQuery: Is there a way to animate a div's width without any text movement?jQuery：有没有办法在不移动任何文本的情况下为 div 的宽度设置动画？
【发布时间】：2011-06-20 16:19:27
【问题描述】：

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

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

虽然它在缩小，但文本会重新排列以适应越来越薄的div。我不希望这种情况发生 - 我希望文本保持原样，只是随着宽度减小而从视图中消失，就像你这样做 $('div#foo').slideUp() 一样。

是否有 CSS 技巧或其他方法可以使这项工作发挥作用？

【问题讨论】：

OT：文本内容在宽度达到0后重新显示的情况如何处理？我必须使用 append .hide(0) 来隐藏文本 - 请参见此处：jsfiddle.net/AvYyT
@Šime Vidas - 实际上我最初是这样做的，但我为我的问题简化了它：$(this).animate({width: 0, opacity: 0},speed,function(){$(this).css('display','none');});。因此，当动画完成后，它会将显示设置为无。

标签： jquery css animation

【解决方案1】：

尝试给它vertical-align:top

【讨论】：

如果您在猜测，请在评论中猜测。仅在您确定它有效时才发布答案。

【解决方案2】：

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

【讨论】：

@David 如果你在猜测，请在评论中猜测。仅在您确定它有效时才发布答案。
@Šime，你怎么知道他“不太确定”它会起作用，不管这意味着什么？你知道你有点像 StackOverflow 的恶霸，对吧？
溢出：hidden 仅在回流无法调整到新空间时隐藏内容。
我很抱歉。我错了。我会考虑你的建议，谢谢你的外交。
@Šime 我个人认为不需要版主注意，否则我会自己要求。我只是想你应该知道有一种礼貌的表达方式。从你的代表和你的回答中，我可以看出你知道你在说什么——我只是鼓励你尝试礼貌地批评，而不是简单地批评每一件小事。

【解决方案3】：

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

类似的东西（未经测试，可能有错别字，但你明白了......）：

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

但这取决于div的内容，如果里面有图片就不行了。

【讨论】：

将子宽度设置为父宽度的确切值是不安全的。如果孩子有填充、边距和/或边框，孩子会变宽，见这里：jsfiddle.net/AvYyT/3。为了解决这个问题，你必须减去$(this).outerWidth(true) - $(this).width() 的差异，见这里：jsfiddle.net/AvYyT/4
@Šime Vidas：就像我说的，这取决于div 的内容，我只是用一个代码示例来说明这个想法。

【解决方案4】：

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

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

【讨论】：

是的，这似乎就是他要找的东西。已注明。

【解决方案5】：

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

【讨论】：

这适用于最大宽度，在这种情况下您可能还想使用overflow: auto，并且不需要额外的元素。
当我们有长文本并且文本是动态的时，我们如何做到这一点
@jitendravarshney 如果你有不同的问题，那么最好问一个新问题