text的更改进行动画处理

text的更改进行动画处理

本文介绍了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的更改进行动画处理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 11:17