javascript - mouseenter - on mouse over on mouse out

jquery animación continua en mouseover

Question

Intento que una animación se ejecute 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

Considerar:

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

Usted puede lograr esto usando temporizadores también.

Answer 2

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

Puedes escribir lo siguiente:

var timerId;

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

Answer 3

Necesitaba que esto funcionara para más de un objeto en la página, así que modifiqué un pequeño 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);
}

Answer 4

Podría hacerse así:

$.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, puedes 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 desea que la animación se detenga inmediatamente , puede cambiar la línea hoverOut para que diga:

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