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

【问题标题】：jQuery: Animate on change of .innerHTML or .textjQuery：在 .innerHTML 或 .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 执行向后动画。

【讨论】：