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，然后您将动画向后移动到{{ 1}}。