estoy usando una api de jquery que hace rotar las imagenes pero tengo una duda de como parar un setInterval con la funcion hover de javascript al hacer hover encima de el contenido se ejecuta el interval pero nececito que al quitar el mouse el interval se detenga no se como pararlo ojala y me puedadn ayudar aqui mi codigo
esta es la imagen que rota con el intervalo
<img id="sincroimg" src="img/flechas-actualizar.png" width="30px" height="30px">
y este es mi archivo js
$(document).ready(function(){
$("#sincroimg").hover(function(){
var angle = 0;//definimos la variable angle igual a 0
var inter=setInterval(function(){
angle+=3;
$("#sincroimg").rotate(angle);
},1);
},function(){
clearInterval(inter);
})
})
al ejecutar este codigo lo que hace es que la imagen empiesa a rotar bien pero al quitar el maouse no se detiene y cuando paso el mouse por encima otra ves lo que hace es que rota mas y mas y mas rapido alguna ayuda por favor