在执行期间暂停jQuery效果

时间:2012-01-10 07:44:22

标签: javascript jquery image hover mouseover

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

现在我拥有正确的代码片段,可以让它随机发光并在悬停时发光但是如何让一个人在图标上空盘旋后停止并恢复随机发光。

谢谢。

3 个答案:

答案 0 :(得分:1)

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

然而,一旦你的悬停开始的额外效果完成,就没有(AFAIK)恢复这些效果的任何方式。

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

编辑 可能可能,但这是未经测试的:

  1. 调用.queue()获取当前动画队列,并复制结果
  2. 致电.stop()以删除所有
  3. 制作新动画
  4. .hover()的“out”功能中,重新启用#1以上排队的项目

答案 1 :(得分:1)

由于您没有提供太多信息,我想到的就是这样做:

  1. 创建一个发光图标的功能
  2. 创建另一个在随机图标上调用glow函数的函数
  3. 创建一个计时器(Interval)以保持以设定的间隔调用randomGlow函数
  4. 为图标附加一个mouseenter事件,以便在触发时清除计时器并仅在该图标上调用glow。当mouseout,它启动一个新的计时器。 (计时器是全球性的)

答案 2 :(得分:0)

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

$('.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
    }
}