jQuery的：动画上.innerHTML的变化或.text区段

Question

我用jQuery的动态更改网站上的文字是这样翻译我的网站：

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

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

它的伟大工程，但由于变化文本的长度，这是一个艰难的过渡，刚刚出现的新文本和父元素立即调整大小。

是否有一种简单的方法在文本更改期间进行动画/缓和转换？像淡入淡出和/或很好地调整大小？

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

谢谢！

Answer 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以ms为单位的是transition time。在完成该操作后，您将执行回调函数，该函数将span的html替换为所需的文本，同时它仍然具有opacity: 0，然后您向后执行动画至opacity: 1。

Live example