color - Jquery Animate en Hover

jquery animations

Question

Tengo un texto que quiero animar cuando tengo un mouse sobre él para, por ejemplo:

$(".tabb tr").hover(
  function(){
    $(this).find("td #headie").animate({marginLeft:''9px''},''slow'')
  },
  function() {
    $(this).find("td #headie").animate({marginLeft:''0px''},''slow'')
  });

con esto ... cuando tengo el mouse sobre la fila ... la columna de la tabla se anima moviendo poco.

El problema aquí es: cuando muevo el cursor del mouse repetidamente sobre estas filas y luego me detengo y veo ... la animación continúa durante un tiempo, incluso si no muevo el mouse sobre ella. Se mantiene moviéndose más tarde ..

¿Cómo puedo parar eso?

Answer 1

Lo obtuve de la manera que quería ... el siguiente fue el cambio que hice "animate ({marginLeft: ''0px''}, 0)"

Compruebe el código de abajo ..

$(document).ready(function(){
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:''9px''},''fast'') });
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:''0px''},0) });
});

Answer 2

Parece que desea enlazar para que no se desplace el mouse, sino que también cree un controlador para mouseout como $(foo).mouseout(function(){$(this).stop();}) para terminar las animaciones.

Answer 3

Un artículo muy bien escrito sobre animaciones de jquery sin problemas en el hover, que encontré, fue este de Chris Coyier en CSS Tricks:

http://css-tricks.com/full-jquery-animations/

Así que encajar esto en tu código se vería así:

$(".tabb tr").hover(
function(){
  $(this).filter('':not(:animated)'').animate({
     marginLeft:''9px''
  },''slow'');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
  $(this).animate({
     marginLeft:''0px''
  },''slow'');
});

Esencialmente, verifica si la fila está siendo animada y si no lo está, solo entonces llama a la animación del mouseenter.

Esperemos que sus filas ahora se animen un poco como los dos últimos ejemplos de esta página:

http://css-tricks.com/examples/jQueryStop/

Answer 4

jQuery proporciona a los Manejadores de eventos especiales para sus necesidades :) use mouseenter y mouseleave

$(".tabb tr").mouseenter(
  function(){
    $(this).find("td #headie").animate({marginLeft:''9px''},''slow'')
  });
$(".tabb tr").mouseleave(
  function() {
    $(this).find("td #headie").animate({marginLeft:''0px''},''slow'')
  });