jQuery：在 .innerHTML 或 .text 更改时制作动画

Posted 2023-05-08

技术标签:

【中文标题】jQuery：在 .innerHTML 或 .text 更改时制作动画【英文标题】：jQuery: Animate on change of .innerHTML or .text 【发布时间】：2014-12-13 07:12:36 【问题描述】：

我正在通过使用 jQuery 动态更改网站上的文本来翻译我的网站，如下所示：

<span id="mySpan">Something in English</span>

$('#mySpan').html("Something else in Spanish");

效果很好，但是由于文本长度的变化，这是一个艰难的过渡，新文本刚刚出现，父元素立即调整大小。

是否有一种简单的方法可以在文本更改期间设置动画/缓和过渡？喜欢淡出和/或调整大小吗？

我知道隐藏元素是可能的，但是因为我有很多文本，如果不需要，我不想加载它。

谢谢！

【问题讨论】：

【参考方案1】：

好吧，如果你的 span 元素有一个父元素，例如：

<div class="parent">
    <span id="mySpan">Something in English</span>
</div>

你可以这样做：

$('#mySpan').animate('opacity': 0, 400, function()
        $(this).html('Something in Spanish').animate('opacity': 1, 400);    
    );

基本上，您将孩子span 的不透明度设置为0，400 是transition time in ms。完成该操作后，您执行一个回调函数，将span 的html 替换为所需的文本，而它仍然具有opacity: 0，然后您对opacity: 1 执行向后动画。

Live example

【讨论】：

以上是关于jQuery：在 .innerHTML 或 .text 更改时制作动画的主要内容，如果未能解决你的问题，请参考以下文章