How to change innerhtml smoothly with pure Javascript?

Asked Jan 17 '18 at 09:40

Active Jan 17 '18 at 09:43

Viewed 921 times

I have a code that changes innerhtml with javascript, it works, but I don´t get how to change the text smoothly with pure javascript, like in jquery the (fast), (slow) function.

var text = ["Flugverspatung und Flugverfruhung", "Flugannullierung und Flugumleitung", "Flugzeugmangel und Nichtbeforderung", "Flug verpasst", "Gepack-Problematik"];

var counter = 0;
var elem = document.getElementById("Artikel-Middle-Uberschrift-Changetext");
setInterval(change, 2000);
  function change() {
    elem.innerHTML = text[counter];
    counter++;
    if (counter >= text.length) {
      counter = 0;
  }
}

<div id="Artikel-Middle-Uberschrift"><h2><b id="Artikel-Middle-Uberschrift-Changetext">Flugverspatung und Flugproblematik</b></h2></div>

Can anyone help me out with that ?

edited Jan 17 '18 at 09:43

asked Jan 17 '18 at 09:40

Dead Pool

1

Can you please use UTF-8? Umlaut lives matter – Luca Kiebel Jan 17 '18 at 09:41
"smoothly" - for those of us who don't use jquery, what does "smoothly" mean – Jaromanda X Jan 17 '18 at 09:49
@JaromandaX something like slowly fading ^^ – Dead Pool Jan 17 '18 at 09:51
Perhaps this old answer helps you: https://stackoverflow.com/questions/29640486/is-there-any-way-to-have-a-transition-effect-when-changing-the-innerhtml – D. Braun Jan 17 '18 at 10:00
Thank you, that´s what I was searching for. – Dead Pool Jan 17 '18 at 10:01
You can do this with css animations and timing it correctly, like so https://jsfiddle.net/mrtk12s3/ – MykolaSenechyn Jan 17 '18 at 10:02
that´s even better, thank you very much ! – Dead Pool Jan 17 '18 at 10:05

How to change innerhtml smoothly with pure Javascript?

0 Answers0