文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery -更改子文本(Span)后，动画父级的宽度平稳。

问Jquery -更改子文本(Span)后，动画父级的宽度平稳。
EN

Stack Overflow用户

提问于 2017-09-03 15:13:22

回答 1查看 54关注 0票数 0

我想知道如何顺利地改变父母的宽度(按钮)-在更改孩子的(跨度)文本后不会立即跳过宽度。这是小提琴。，谢谢！

HTML：

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

jQuery：

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

frontend

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-03 17:45:27

您应该使用宽度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();
  });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46024842

复制

相似问题

问Jquery -更改子文本(Span)后，动画父级的宽度平稳。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery -更改子文本(Span)后，动画父级的宽度平稳。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery -更改子文本(Span)后，动画父级的宽度平稳。
EN