jQuery mouseleave和clearInterval不起作用

我开始玩SVG图像，我制作了两个应该打开.mouseenter（）并停在.mouseleave（）上的大齿轮。转向由setInterval函数完成。我有一个奇怪的问题，因为在Linux Chromium上一切正常。在Linux Firefox和Windows上Chrome和Firefox大齿轮不会停留在mouseLeave上，并会加速mouseEnter。我正在尝试.hover（）和.mouseenter（）/ mouseLeave（）方法。jQuery mouseleave和clearInterval不起作用

我的代码：

$(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

来源

2014-02-06 mlekorlz

这取决于你如何将鼠标悬停在上面。看起来你的容器中有一个洞，所以如果你从左到右移动到中心位置，它将设置一个新的间隔，然后有机会清除旧的。我在鼠标输入部分添加了一个明确的时间间隔（清空后检查null并将其设置为null）并观察发生了什么：http://jsfiddle.net/UM88Y/2/ – gpgekko

问题是在你的悬停功能。

即使将鼠标移动到div＃cogs上，悬停也会发生。

这将添加一个新的timeInterval，但不调用clearInterval来清除旧的。

只需将 if(interval) clearInterval(interval); 添加到悬停函数的第一行即可。

来源

2014-02-06 10:00:47 Sho

jQuery mouseleave和clearInterval不起作用

回答

相关问题