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

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

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

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

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

有没有一种简单的方法可以在文本更改期间动画/缓解过渡？喜欢淡入淡出和/或很好地调整大小吗？

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

Thanks!

好吧，如果你的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 is transition time在女士。该操作完成后，您将执行一个回调函数来替换span's html与想要的文字，而它仍然有opacity: 0，然后你做向后动画opacity: 1.

实例 http://jsfiddle.net/ewtehLyc/1/