Question

您好我正在使用以下代码在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);

我的目标是在mouseleave上停止动画并保留当前索引的字母我怎么能这样做？这是我的fiddle。关于曼努埃尔

Answer 1

您需要做的是清除所有超时功能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);

＆＃13;

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);

＆＃13;

#logo a {
  background: red;
  padding: 50px;
  font-size: 40px;
  text-decoration: none;
  color: #fff;
}

＆＃13;

<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>

＆＃13;

仅使用Jquery在Hover上显示一个接一个的字母

1 个答案: