javascript - Jquery - 在更改 child 的(跨度)文本后平滑地动画 parent 的宽度。

Question

我想知道如何平滑地更改父项的宽度(按钮) - 在更改子项(跨度)文本后不会立即跳转宽度。 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/

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();
  });
});