jQuery mouseleave et clearInterval ne fonctionnent pas

Je commence à jouer avec les images SVG, j’ai créé deux roues dentées qui devraient allumer .mouseenter () et s’arrêter sur .mouseleave (). Le tournage est effectué par la fonction setInterval. J’ai un problème étrange car sur Linux Chromium tout fonctionne bien. Sous Linux, Firefox et Windows Chrome et Firefox ne s’arrêtent pas sur mouseLeave et s’accélèrent sous mouseEnter. J’essayais les méthodes .hover () et .mouseenter () / mouseLeave ().

Mon 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); } ); }); 

Mon JSfiddle

le problème est dans votre fonction de survol.

Le survol se produit même lorsque vous déplacez votre souris sur le div # cogs.

Cela va append un nouveau timeInterval, mais le clearInterval n’est pas appelé pour effacer l’ancien.

Il suffit d’append if(interval) clearInterval(interval); à la première ligne de la fonction de survol.