执行期间暂停 jQuery 效果

Question

我的网站有一些图标在鼠标悬停时会发光，但我希望它在没有人悬停时随机发光。

现在我有正确的代码片段，可以使其随机发光并在悬停时发光，但如何在人将鼠标悬停在图标上后停止并恢复随机发光。

谢谢。

Answer 1

由于您没有提供太多信息，这就是我想要做的：

1. 创建一个使图标发光的函数
2. 创建另一个在随机图标上调用发光函数的函数
3. 创建一个计时器（间隔）以按照设定的时间间隔继续调用 randomGlow 函数
4. 为图标附加一个 mouseenter 事件，以便在触发时，它会清除计时器并仅在该图标上调用发光。当鼠标移开时，它会启动一个新的计时器。 （定时器是全局的）

Answer 2

您可以使用 .stop() 停止任何现有效果。

然而，一旦您的悬停启动的附加效果完成，就没有任何方法可以恢复这些效果。

您必须在第二个 .hover() 回调中重新启动“随机”发光。

编辑它可能是可能的，但这未经测试：

1. 调用.queue()来获取当前的动画队列，并复制结果
2. 调用< code>.stop() 删除
3. .hover() 的“out”函数中的新动画的
4. 所有内容，重新设置上面 #1 中的排队项目

Answer 3

您可以在发光之前检查它们的图标是否发光：

$('.icon').hover(function() {
    $(this).stop(true, true);
    $(this).toggleClass('glow', true);
}, function() {
    $(this).stop(true, true);
    $(this).toggleClass('glow', false);
});

function randomglow(icon) {
    if (!$(icon).hasClass('glow')) {
        //your glow code here
    }
}