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

Answer 2

如Kevin B所述，鼠标将在文本上移动并阻止动画显示。

但要实现您的要求，请使用以下

var mozaic;

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

$(document).mousemove(function() {
   clearInterval(mozaic);
});

请注意，mosaic变量必须是全局变量，因此 mousemove 函数可以访问它。在鼠标悬停函数中初始化它会将范围限制在该函数内。

也许要实现你想要的（效果明智）尝试在文本上使用 mouseout 。

$('#name').mouseout(function() {
    clearInterval(mosaic);
}

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

2 个答案: