JSFiddle - React, Tailwind, and code Playground

by Hulothe

HTML

<p>Here is a sentence <span id="rotate">this</span> is what changes</p>

JavaScript

var terms = ["term 1", "term 2", "term 3"],
  interval;

function displayNext() {
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").fadeOut(200);
  setTimeout(function() {
    $("#rotate").data("term", ct == terms.length - 1 ? 0 : ct + 1).text(terms[ct]).fadeIn();
  }, 200);
};

function rotateTerm() {
  displayNext();
  interval = setInterval(function() {
    displayNext();
  }, 2000);
}

$("#rotate").mouseenter(function() {
  rotateTerm();
});

$("#rotate").mouseleave(function() {
  clearInterval(interval);
  setTimeout(function() {
    $('#rotate').text('this');
  }, 200);
});