jQuery的鼠标离开和clearInterval不工作(jQuery mouseleave and

我开始与SVG图片玩，我做了两个齿轮，应打开.mouseenter（）和停止.mouseleave（）。 在谈到由setInterval函数取得。 我有一个奇怪的问题，因为在Linux上铬一切正常。 在Linux上的Firefox和Windows Chrome和Firefox齿轮不停止在鼠标离开和的MouseEnter加快。 我试图既.hover（）和.mouseenter（）/鼠标离开（）方法。

我的代码：

$(document).ready(function(){
    var deg = 0;
    var rotate_right = $('#cog1 use');
    var rotate_left = $('#cog2 use');
    var interval;
        $("#cogs").hover(
            function(){
                interval = setInterval(function(){
                if(deg >= 360) deg = 0;
                    deg += 1;
                    rotate_right.attr('transform', 'rotate('+deg+',32,32)');
                    rotate_left.attr('transform', 'rotate('+-deg+',32,32)');
            }, 10);
            },
            function(){
                clearInterval(interval);
            }
        );
});

我的jsfiddle

Answer 1:

问题是在你的悬停功能。

哈弗当你移动你的鼠标在DIV＃齿轮甚至发生。

这将添加一个新的一个时间间隔，但调用clearInterval不叫清除旧的。

只需添加if(interval) clearInterval(interval); 到悬停功能的第一行。

文章来源: jQuery mouseleave and clearInterval not working