鼠标悬停时启动一个功能,当鼠标移动时停止它

Question

我希望函数mozaic在mouseover时启动并在mouseleave时停止.第一个正常工作.这是代码:

$('#name').mouseover(function() {
    var mozaic = setInterval(mosaic, 150);
});

$('#name').mouseout(function() {
    //code...
});

function mosaic() {
    setTimeout(function() {
        $('#name').addClass('shadowLasure');
    }, 0);

    setTimeout(function() {
        $('#name').removeClass('shadowLasure');
        $('#name').addClass('shadowPink');
    }, 50);

    setTimeout(function() {
        $('#name').removeClass('shadowPink');
    }, 100);
}

Answer 1

尝试这样的事情.

您需要在两个函数中都可访问变量,因此需要在这些函数之外声明它,然后在第一个函数内部定义并用于clearInterval()取消现有间隔

var timer;
$('#name').mouseenter(function() {
   timer = setInterval(mosaic, 150);
}).mouseleave(function() {
    clearInterval(timer);
});