我通过使用 jQuery 动态更改网站上的文本来翻译我的网站，如下所示:
<span id="mySpan">Something in English</span>
$('#mySpan').html("Something else in Spanish");
效果很好，但是由于文本长度的变化，这是一个困难的过渡，新文本刚刚出现，父元素立即调整大小。
有没有一种简单的方法可以在文本更改期间设置动画/简化过渡？喜欢淡入淡出和/或很好地调整大小吗？
我知道隐藏元素是可能的，但因为我有很多文本，所以如果不需要，我不想加载它。
谢谢!
最佳答案
好吧，如果您的 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 是过渡时间(以毫秒为单位)。该操作完成后，您执行一个回调函数，将 span 的 html 替换为所需的文本，同时它仍然具有 opacity: 0，并且然后你做向后动画到opacity: 1。
关于jQuery:在 .innerHTML 或 .text 更改时制作动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26429480/