jQuery:对.innerHTML或.text的更改进行动画处理

问题描述

我正在通过使用jQuery这样动态更改网站上的文本来翻译我的网站:

I'm translating my site by dynamically changing the text on the website with jQuery like this:

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

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

它的效果很好，但是由于文本长度的变化，这是一个艰难的过渡，新文本只会出现，并且父元素会立即调整大小.

It works great but, due to changes in the length of the text, it's a hard transition, the new text just appears and parent element is resizing instantly.

在文本更改期间，是否有一种简便的方法来动画化/简化过渡?喜欢淡入淡出和/或调整大小?

Is there an easy way to animate/ease the transition during the change of text? Like Fadeing and/or resizing nicely?

我知道隐藏元素是可行的，但是由于文本很多，因此我不想在不需要时加载它.

I know it's possible with hidden elements, but because I have lot's of text, I don't want to load this if not needed.

谢谢！

推荐答案

好吧，如果您的 span 元素有一个父级，例如:

Well, if your span element has a parent, e.g.:

<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 .

Basically, you animate child span's opacity to 0, 400 is transition time in ms. After that action is done, you do a callback function which replaces span's html with wanted text while it still has opacity: 0, and then you do backwards animation to opacity: 1.

实时示例

这篇关于jQuery:对.innerHTML或.text的更改进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！