text animate on mouseover, stop and reset on mouseout

Question

I am looking to have some text that is static, but when a user hovers over the text, it animates through an array of different words, stopping and showing the static word when the user removes their mouse.

I got pretty far with the help of this other SO post:

changing text periodically in a span from an array with jquery

But cant get the loop queue to stop and go back to the original word after the hover is removed.

I want to have a sentence, such as this:

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

So that if the user hovers over "this", then it animates by fading in/out to an array of other words, eg:

var terms = ["newword1", "newword2", "newword3"];

But when the hover is removed, it then stops the animation queue and resets to show "this" again.

This is what I have so far:

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

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

Mainly from the other SO post, but have changed the trigger to:

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

$("#rotate").mouseleave(function(){
});

So this now fires on mouseover, which is great, but I have difficulty in what to put in the "mouseleave" function to stop the rotating text that is now running all the time.

Hulothe · Accepted Answer · 2016-08-21T20:38:19.957

2

I think you're looking for something like this:

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();
  }, 190);
};

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

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

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

Working Fiddle: here

edited Aug 21 '16 at 20:38

answered Aug 21 '16 at 18:02

Hulothe

744
1
5
17

This looks fairly good, but if you put your mouse over the center of the changing text, and dont move the mouse pointer at all, sometimes the text randomly "flickers" or jumps between two or three states at a time. Any idea what is causing this? – R2D2 Aug 21 '16 at 20:20
1

@Richard You're right, it's because sometimes the `mouseleave` event triggers between `fadeOut()` and `fadeIn()`, I changed the timeout to fix this. – Hulothe Aug 21 '16 at 20:37
2

@Richard You might want to hover over the paragraph itself (block element) rather than the span (inline element). https://jsfiddle.net/NotInUse/6tgz1gsa/3/ +1 for this though. – Scott Aug 21 '16 at 20:48
This seems much more stable now. Thanks. – R2D2 Aug 21 '16 at 21:00
I experimented with speeding up the fading text, and have found that when you mouse off the text, the animation keeps going for a while. To test this out, just divide all delays by 10 and mouse over and then out of the text - it keeps fading for quite a while! Is a "stop" needed somewhere? – R2D2 Aug 29 '16 at 19:09

text animate on mouseover, stop and reset on mouseout

1 Answers1