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不起作用

回答

相關問題