jQuery-更改孩子的（跨度）文本后，平滑地动画父母的宽度。

Question

我想知道如何平稳地更改父级的宽度（按钮）-在更改子级（跨度）文本后不立即跳宽。 这是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/

HTML:
<button>
  <span id="firstspan">Hi</span>
  <span id="secondspan">Hello World!!</span>
</button>

CSS:
span {
  white-space: nowrap;
}
button {
  overflow: hidden;
  width:35px;
  transition: width 2s;
}

JQuery:
$(function() {
  $("#secondspan").hide();
  $("button").one("click", function() {
    $("button").css("width", "90px");
    $("#firstspan").toggle();
    $("#secondspan").toggle();
  });
});