Lepus Lepus - 6 months ago 31
jQuery Question

Show one letter after another on Hover only with Jquery

Hello i'm using the following code to display one letter after another on mouseenter.

function showText2(target, message, index, interval) {
if (index < message.length) {
$(target).html(message[index++]);
if(index == message.length) {
index = 0;
setTimeout(function () { showText2(target, message, index, interval); }, interval);
} else {
setTimeout(function () { showText2(target, message, index, interval); }, interval);
}
}
}



function showText(target, message, index, interval) {
$(target).on('mouseenter', function(){
if (index < message.length) {
$(target).html(message[index++]);
setTimeout(function () { showText2(target, message, index, interval); }, interval);
}
}).on('mouseleave', function(){
console.log('LEAVE!');
});
}


showText("#logo a", "Raffael Strasser", 0, 500);


My goal is to stop the animation on mouseleave and keep the letter of the current index how could i do this? Here is my fiddle.
regards Manuel

Prs Prs
Answer

What you have to do is clear all timeout function onmouseleave

var timeOut, timeOut2;
function showText2(target, message, index, interval) {   
    if (index < message.length) {
        $(target).html(message[index++]);
        if(index == message.length) {
            index = 0;
            timeOut = setTimeout(function () { showText2(target, message, index, interval); }, interval);
        } else {
            timeOut = setTimeout(function () { showText2(target, message, index, interval); }, interval);
        }
    }
}

function showText(target, message, index, interval) {
    var timeOut;
    $(target).on('mouseenter', function(){
        if (index < message.length) {
            $(target).html(message[index++]);
            timeOut2 = setTimeout(function () { showText2(target, message, index, interval); }, interval);
        } 
    }).on('mouseleave', function(){
        clearTimeout(timeOut);
        clearTimeout(timeOut2);
    });
}

showText("#logo a", "Raffael Strasser", 0, 500);   

var timeOut, timeOut2;
function showText2(target, message, index, interval) {   
if (index < message.length) {
    $(target).html(message[index++]);
    if(index == message.length) {
        index = 0;
        timeOut = setTimeout(function () { showText2(target, message, index, interval); }, interval);
    } else {
        timeOut = setTimeout(function () { showText2(target, message, index, interval); }, interval);
    }
}
}



function showText(target, message, index, interval) {
$(target).on('mouseenter', function(){
    if (index < message.length) {
        $(target).html(message[index++]);
        timeOut2 = setTimeout(function () { showText2(target, message, index, interval); }, interval);
    } 
}).on('mouseleave', function(){
    clearTimeout(timeOut);
    clearTimeout(timeOut2);
});
}


showText("#logo a", "Raffael Strasser", 0, 500);   
#logo a {
  background: red;
  padding: 50px;
  font-size: 40px;
  text-decoration: none;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="logo" class="columns small-12">
  <a href="#" rel="home">
  </a>
</div>