Jquery Animate Hover

Question

J'ai un texte que je veux animer quand je rencontre une souris dessus pour par exemple:

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

avec ce .. quand je suis avec la souris sur la ligne .. la colonne de table anime en déplaçant peu.

problème ici est: quand je déplace le curseur de la souris à plusieurs reprises sur ces lignes, puis arrêter et voir .. l'animation continue à aller pendant un certain temps, même si je ne suis pas le déplacement de la souris dessus. It Keeps plus tard .. SE MOVING

comment puis-je arrêter ça?

Answer 1

Semble que vous souhaitez lier à mousemove pas planer, mais également créer un gestionnaire pour le passage au clavier comme $(foo).mouseout(function(){$(this).stop();}) pour terminer les animations.

Answer 2

Je l'ai comme je le voulais .. ce qui suit est le changement que je fait "Animer ({marginLeft: '0px'}, 0)"

Vérifiez le code ci-dessous ..

$(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 3

un article très bien écrit sur les animations jquery lisses sur vol stationnaire, que je trouvais, était celle-ci par Chris Coyier Tricks CSS:

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

montage Donc, ce à votre code ressemblera à ceci:

$(".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'); 
}); 

Essentiellement, il vérifie si la ligne est animée et si ce n'est pas, alors seulement faut-il appeler l'animation mouseenter.

Espérons que vos lignes seront maintenant animer un peu comme les deux derniers exemples sur cette page:

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

Answer 4

jQuery fournit des eventhandlers spéciales pour vos besoins :) utilisation mouseenter et 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') 
    });