1

I am trying to make the transition smoothly. The html is changing but I want it to look smoother. Does anyone know how to do this?

My code: 

var words = ["Leergierige", "Enthousiaste", "vooruitstrevende", "innovatieve"];
var i = -1;

function randomWord(){
  //var randomId = document.getElementById("random-word");

  setInterval(function(){
    i++

  $("#random-word").html(words[i]).fadeIn("slow");

   if (i === 3){
    i = -1;
  }
}, 2000);

 }
Rubenxfd
  • 434
  • 1
  • 5
  • 19

1 Answers1

2

fadeOut the previous words and then fadeIn the next word.

$("#random-word").fadeOut('slow', function() {
    $(this).html(words[i]).fadeIn("slow");
});

Demo

Tushar
  • 85,780
  • 21
  • 159
  • 179
  • Excellent! I found `fadeTo` was slightly better for my needs as I didn't want the area to totally vanish: http://jsfiddle.net/28s9qfeb/4/. – SharpC Nov 29 '18 at 10:06