web-dev-qa-db-fra.com

Jquery Animate sur Hover

J'ai un texte que je veux animer quand je passe la souris dessus par exemple:

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

avec ça .. quand je passe la souris sur la ligne .. la colonne du tableau s'anime en se déplaçant peu.

Le problème est le suivant: lorsque je déplace le curseur de la souris à plusieurs reprises sur ces lignes, puis m'arrête et vois .. l'animation continue pendant un certain temps même si je ne déplace pas la souris dessus. IL GARDE SE DÉPLACER PLUS TARD ..

comment puis-je arrêter ça?

jqueryanimationhover
18
Deepak

Un article très bien écrit sur les animations jquery lisses en survol, que j'ai trouvé, était celui de Chris Coyier sur CSS Tricks:

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

Donc, l'adapter à votre code ressemblerait à 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 le cas, il appelle alors l'animation mouseenter.

J'espère que vos lignes s'animeront maintenant un peu comme les deux derniers exemples de cette page:

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

34
Max G J Panas

Je l'ai eu comme je le souhaitais. Voici le changement que j'ai 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) });
});
3
Deepak

jQuery fournit des gestionnaires d'événements spéciaux pour vos besoins :) utilisez 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')
  });
1
1b0t

On dirait que vous voulez lier à mousemove non pas en vol stationnaire, mais aussi créer un gestionnaire pour mouseout comme $(foo).mouseout(function(){$(this).stop();}) pour terminer les animations.

1
annakata