Stop function on mouseleave

Question

I am having issues with a function that is trigger on mouseenter and it loops. The problem is that I want to function to stop on mouseleave.

Tried a few things but nothing seemed to work as expected.

HTML

<div class="trigger">Hover me to trigger animation</div>

<div class="logo-tagline">
  <span>Simple.</span>
  <span>Fast.</span>
  <span>Around you.</span>
</div>

JQuery

$( ".trigger" ).mouseenter(function() {
  function highlight(items, index) {
    index = index % items.length;
    items.removeClass("-visible");
    items.eq(index).addClass('-visible');   
    setTimeout(function() {
      highlight(items, index + 1)
    }, 1000);
  }
  
  highlight($('.logo-tagline span'), 0);
});

Link to my pen: https://codepen.io/Vlasin/pen/YzZxqNp?editors=1010

Answer 1

• you just need to clear the setTimeout, something as following

• Note though that depending upon whether or not you want to hide the text again is up to you so handle that accordingly.

    let timeoutFunc;
    function highlight(items, index) {
        index = index % items.length;
        items.removeClass("-visible");
        items.eq(index).addClass('-visible');   
        timeoutFunc = setTimeout(function() {
            highlight(items, index + 1)
        }, 1000);
    }
  
    $( ".trigger" ).mouseenter(function() {
        highlight($('.logo-tagline span'), 0);
    });
  
    $( ".trigger" ).mouseleave(function() {
        $('.-visible').removeClass("-visible");
        clearTimeout(timeoutFunc);
    });