我通过jQuery动态更改网站上的文字来翻译我的网站:
<span id="mySpan">Something in English</span>
$('#mySpan').html("Something else in Spanish");
效果很好但是,由于文本长度的变化,它是一个艰难的过渡,新文本刚出现,父元素立即调整大小。
在更改文本期间,是否有一种简单的方法可以动画/简化过渡?喜欢淡化和/或调整大小?
我知道它可能带有隐藏元素,但由于我有很多文字,如果不需要,我不想加载它。
谢谢!
答案 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,400
为transition time
毫秒。完成该操作后,您会执行一个回调函数,该函数会将span
html
替换为所需文本,同时仍然具有opacity: 0
,然后您将动画向后移动到{{ 1}}。