jQuery mouseleave和clearInterval无法正常工作 [英] jQuery mouseleave and clearInterval not working

问题描述

我开始使用SVG图像，我制作了两个齿轮，分别应打开.mouseenter()和停止于.mouseleave().通过setInterval函数进行车削. 我有一个奇怪的问题，因为在Linux Chromium上一切正常.在Linux上，Firefox和Windows的Chrome和Firefox齿轮不会在mouseLeave上停止并在mouseEnter上加速.我正在尝试.hover()和.mouseenter()/mouseLeave()方法.

I'm starting to play with SVG images, I've made two gearwheels which should turn on .mouseenter() and stop on .mouseleave(). Turning is made by setInterval function. I have a strange problem because on Linux Chromium everything works well. On Linux Firefox and Windows Chrome and Firefox gearwheels aren't stopping on mouseLeave and speed up on mouseEnter. I was trying both .hover() and .mouseenter()/mouseLeave() methods.

我的代码:

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

推荐答案

问题出在您的悬停功能上.

the problem is in your hover function.

即使在div#cogs上移动鼠标，也会发生悬停.

Hover happens even when you move your mouse on the div#cogs.

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

This will add a new timeInterval, but the clearInterval is not called to clear the old one.

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

Just add if(interval) clearInterval(interval); to the first line of hover function.

这篇关于jQuery mouseleave和clearInterval无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！