JQuery animate () по ширине, устанавливая содержимое элемента

Question

Есть ли способ анимировать изменение ширины при установке текста () элемента?

Скажем, у нас есть

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

, то естьзатем программно изменяется, скажем, $('#link').text('sub2'); на следующее:

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

Обычно ширина указанного элемента изменяется мгновенно, но эффект, который я ищу, заключается в его постепенном анимированном уменьшении.

Спасибо.

Answer 1

Вы можете сделать что-то вроде этого:

http://jsfiddle.net/HYZbA/

Я в основном обернул <a> в div с overflow:hidden.Затем, когда текст изменяется, оболочка анимируется до размера a.

ПРИМЕЧАНИЕ. Красная рамка предназначена для того, чтобы вы могли видеть, что происходит.Удалите это, чтобы увидеть это в действии.

Answer 2

Я искал свое собственное решение, и, основываясь на ответе Джеймса Монтаня, я придумал http://jsfiddle.net/HYZbA/33/, сочетающий fadeIn / fadeOut, как предложено Albinoswordfish.

Answer 3

Я не уверен, что вы действительно можете анимировать текст в другой текст, однако я сделал что-то для этого, сначала используя fadeOut(), затем установив текст, а затем fadeIn(), чтобы текст появилсяснова.Это создаст впечатление постепенного изменения текста.