Jquery - 在更改子项（span）文本后平滑地动画父项的宽度。

Question

我想知道如何更改父级的宽度（按钮）SMOOTHLY - 在更改子级（span）文本后不立即跳跃宽度。 Here's the jsfiddle.谢谢！

HTML：

<button><span>Hi</span></button>

jQuery的：

$("button").click(function(){
    $("button span").text("Hello World!!");
});

Answer 1

您应该使用宽度css过渡，并将新文本和旧文本放在单击按钮时切换的跨度中。 JSFiddle：https://jsfiddle.net/grt812/fz4xya60/36/

one
two
----End-----
two
three
---End-----
four
ten
---End-----
six
seven