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
Post a Comment