我希望我的 javascript 中的文本更改动画能够平滑过渡

Question

所以我有一个 h1（“你好，我是 xxxxxxxxx”）并用“问候”ID 将“你好”包裹在跨度中，我每 3 秒将 js 中的文本更改为另一种语言的“你好”。 它工作正常，但我希望它顺利改变但不会突然弹出。

// 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; }
    }

Answer 1

对于 Jquery，您可能需要先使用fadeOut()，然后使用fadeIn() 函数。 你的代码会是这样的：

 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>

Answer 2

你可以通过添加一些 css 并使用 transition 属性来做到这一点。

 var greet = new Array("Hola", "Hallo", "Merhaba"); var counter= 0; document.getElementById('greeting').innerHTML = greet[counter]; Changegreeting1(); function Changegreeting1(){ incrementIndex() document.getElementById('greeting1').innerHTML = greet[counter]; document.getElementById('greeting').style.opacity = 0; document.getElementById('greeting1').style.opacity = 1; setTimeout(Changegreeting, 2000); } function Changegreeting(){ incrementIndex(); document.getElementById('greeting').innerHTML = greet[counter]; document.getElementById('greeting').style.opacity = 1; document.getElementById('greeting1').style.opacity = 0; setTimeout(Changegreeting1, 2000); } function incrementIndex(){ if(counter < greet.length - 1 ){ counter++; }else{ counter = 0; } }

 #greeting{ transition: opacity 1s; } #greeting1{ transition: opacity 1s; position:absolute; top:0px; margin-top:0px }

 <p id = "greeting"></p> <p id = "greeting1"></p>

那是你要的吗

Answer 3

如果“变平稳”你的意思是一些平滑过渡，在淡出淡入，我建议在看jQuery的淡出和淡入方法。

动画持续时间设置为 100 的change()函数可能如下所示：

function change() {
   // Fade out
   $("#greeting").fadeOut(100, function() {
      // Increment the counter
      counter++;
      if(counter >= text.length) { counter = 0; }
      // Update the text and fade in
      $("#greeting").text(text[counter]).fadeIn(100);
   })
}