jQuery:改变.innerHTML或.text的动画

时间:2014-10-17 16:30:05

标签: jquery animation

我通过jQuery动态更改网站上的文字来翻译我的网站:

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

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

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

在更改文本期间,是否有一种简单的方法可以动画/简化过渡?喜欢淡化和/或调整大小?

我知道它可能带有隐藏元素,但由于我有很多文字,如果不需要,我不想加载它。

谢谢!

1 个答案:

答案 0 :(得分:9)

好吧,如果你的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,400transition time毫秒。完成该操作后,您会执行一个回调函数,该函数会将span html替换为所需文本,同时仍然具有opacity: 0,然后您将动画向后移动到{{ 1}}。

Live example