1

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.

My code:

$(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);
            }
        );
});

My JSfiddle

mlekorlz
  • 13
  • 2
  • It depends on how you mouse over it. It seems there is a hole in your container, so if you move from left to right over the center, it will set a new interval before it gets a chance to clear the old one. I added a clear interval to the on mouse enter part (with a check for null and setting to null after clearing) and watch what happens: http://jsfiddle.net/UM88Y/2/ – gpgekko Feb 06 '14 at 09:54

1 Answers1

1

the problem is in your hover function.

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

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

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

Sho
  • 294
  • 1
  • 5