html - jQuery mouseleave and clearInterval not working -


i'm starting play svg images, i've made 2 gearwheels should turn on .mouseenter() , stop on .mouseleave(). turning made setinterval function. have strange problem because on linux chromium works well. on linux firefox , windows chrome , firefox gearwheels aren't stopping on mouseleave , speed on mouseenter. trying both .hover() , .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

the problem in hover function.

hover happens when move mouse on div#cogs.

this add new timeinterval, clearinterval not called clear old one.

just add if(interval) clearinterval(interval); first line of hover function.


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -