通过设置元素内容，在宽度上使用JQuery animate（）

Question

有没有办法在设置元素的text（）时设置宽度变化的动画？

说，我们有

<a id="link" href="#">container/sub1/sub2</a>

然后以编程方式将$('#link').text('sub2');更改为：

<a id="link" href="#">sub2</a>

通常，所述元素的宽度会立即改变，但我正在寻找的效果是逐渐减少动画。

谢谢。

Answer 1

我不确定你是否真的可以将文本设置为另一个文本，但是我已经做了一些事情，首先使用fadeOut()然后设置文本，然后使用fadeIn()来让文字再次出现。这将使文本逐渐发生变化。

Answer 2

你可以这样做：

http://jsfiddle.net/HYZbA/

我基本上将<a>包裹在overflow:hidden的div中。然后，当文本更改时，包装器的动画大小为a。

注意：红色边框只是让您可以看到发生了什么。删除它以查看它的实际效果。

Answer 3

我一直在寻找自己的解决方案，根据James Montagne的回答，我根据Albinoswordfish的建议，提出了http://jsfiddle.net/HYZbA/33/ fadeIn / fadeOut的结合。