jquery animación continua en mouseover

Question

Estoy tratando de tener una animación solo cuando el mouse está sobre un objeto. Puedo obtener una iteración de la animación y luego hacer que vuelva a la normalidad con el mouse. Pero me gustaría que la animación bucle en mouseover. ¿Cómo lo haría, usando setInterval? Estoy un poco atrapado.

Answer 1

Se podría hacer de esta manera:

$.fn.loopingAnimation = function(props, dur, eas) 
{ 
    if (this.data('loop') == true) 
    { 
     this.animate(props, dur, eas, function() { 
      if($(this).data('loop') == true) $(this).loopingAnimation(props, dur, eas); 
     }); 
    } 

    return this; // Don't break the chain 
} 

Ahora, usted puede hacer esto:

$("div.animate").hover(function(){ 
    $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300); 
}, function(){ 
    $(this).data('loop', false); 
    // Now our animation will stop after fully completing its last cycle 
}); 

Si quería la animación inmediatamente parada, se puede cambiar la línea hoverOut para leer :

$(this).data('loop', false).stop(); 

Answer 2

setInterval devuelve una identificación que se puede pasar a clearInterval para desactivar el temporizador.

Puede escribir lo siguiente:

var timerId; 

$(something).hover(
    function() { 
     timerId = setInterval(function() { ... }, 100); 
    }, 
    function() { clearInterval(timerId); } 
); 

Answer 3

Considere:

<div id="anim">This is a test</div> 

con:

#anim { padding: 15px; background: yellow; } 

y:

var over = false; 
$(function() { 
    $("#anim").hover(function() { 
    over = true; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim); 
    } 
} 

function shrink_anim() { 
    $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim); 
} 

Puede lograr esto usando temporizadores también.

Answer 4

Necesitaba esto para trabajar para más de un objeto en la página, así que modifiqué un poco de código de Cletus:

var over = false; 
$(function() { 
    $("#hovered-item").hover(function() { 
    $(this).css("position", "relative"); 
    over = true; 
    swinger = this; 
    grow_anim(); 
    }, function() { 
    over = false; 
    }); 
}); 

function grow_anim() { 
    if (over) { 
    $(swinger).animate({left: "5px"}, 200, 'linear', shrink_anim); 
    } 
} 

function shrink_anim() { 
    $(swinger).animate({left: "0"}, 200, 'linear', grow_anim); 
}