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是transition time在毫秒.该操作完成后,你做一个回调函数,它取代span的html与想要的文字,同时它还是有opacity: 0,然后你做向后动画opacity: 1.

实例