0

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

1 respuesta 1

2

jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

$(document).ready(function(){
var inter;
$("#sincroimg").hover(function(){
  var angle = 0;//definimos la variable angle igual a 0
  inter=setInterval(function(){
    angle+=3;
  $("#sincroimg").rotate(angle);
  },1);

 },function(){ 
       clearInterval(inter); 
     })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://wakyma.com/blog/wp-content/uploads/2017/10/Tipos-de-diarrea-en-gatos-y-su-tratamiento-770x460." width="200" height="200" id="sincroimg">

Saca la variable inter y ponla en un scope más 'general'.

La función de girar la saqué de Aquí Espero te ayude

1
  • vos ser un genio tio me funciono a la perfeccion gracias man
    – andy gibbs
    Commented el 12 jul. 2018 a las 3:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.