Question

我开始玩SVG图像，我已经制作了两个齿轮，它们应该打开.mouseenter（）并停在.mouseleave（）上。通过setInterval函数进行转动。我有一个奇怪的问题，因为在Linux Chromium上一切都运行良好。在Linux上Firefox和Windows Chrome和Firefox齿轮不会在mouseLeave上停止并在mouseEnter上加速。我正在尝试.hover（）和.mouseenter（）/ mouseLeave（）方法。

我的代码：

$(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＃cogs上移动鼠标，也会发生悬停。

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

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

jQuery mouseleave和clearInterval无法正常工作

1 个答案: