我希望我的JavaScript中的文本更改动画具有平稳的过渡 [英] I want my text change animation in javascript to have smooth transition
本文介绍了我希望我的JavaScript中的文本更改动画具有平稳的过渡的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
所以我有一个h1("Hello,我是xxxxxxxxx"),并用"greeting" id包裹了"Hello",然后每隔3秒将js中的文本更改为另一种语言的Hello.它工作正常,但我希望它能平滑变化但不会突然弹出.
So I have an h1 ("Hello, I'm xxxxxxxxx") and wraped "Hello" in span with "greeting" id and I change the text in js every 3s to an Hello in another language. It works fine but I want it change smoothly but not pop up suddenly.
// change text every 3 second
var text = ["Hola", "Hallo", "Merhaba"];
var counter = 0;
var elem = document.getElementById("greeting");
setInterval(change, 3000);
function change() {
elem.innerHTML = text[counter];
counter++;
if(counter >= text.length) { counter = 0; }
}
推荐答案
对于Jquery,您可能想使用fadeOut(),然后使用fadeIn()函数.您的代码将是:
With Jquery, you might want to use fadeOut(), then fadeIn() functions. And your code would be like:
var text = ["Hola", "Hallo", "Merhaba"];
var counter = 0;
var elem = $("#greeting");
setInterval(change, 3000);
function change() {
elem.fadeOut(function(){
elem.html(text[counter]);
counter++;
if(counter >= text.length) { counter = 0; }
elem.fadeIn();
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='greeting'>Hello<div>
这篇关于我希望我的JavaScript中的文本更改动画具有平稳的过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文