jquery fadein arrêter

Question

j'ai script suivant

<script> 
    $(document).ready(function(){ 
    $("div.mover").hover(function() { 
    $("div.hide1").fadeTo("slow", 0.33); 

    $("div.hide1").fadeTo("slow", 1); 

},function(){ 
    $("div.hide1").stop(); 
}); 
    }); 
</script> 

and html page is 

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><div class="mover"><IMG SRC="images/buttons_full_01.png" ></div></td> 
</tr> 
<tr> 
<td><div class="mover"><IMG SRC="images/buttons_full_02.png"></div></td> 
</tr> 
<tr> 
<td><div class="mover"><IMG SRC="images/buttons_full_03.png"></div></td> 
</tr> 
</table> 

ma fonction est de disparaître l'arrière-plan de la souris de bouton

mais le problème si je passer la souris sur tous les boutons et après la souris à gauche les boutons animation continuez jusqu'à ce qu'il complète toutes ses transactions. Ce que je veux est: comme la souris a quitté l'animation des boutons viennent à $ ("div.hide1"). FadeTo ("lent", 1); et d'arrêter

Answer 1

Votre fonction initiale fonctionne très bien tant que le pointeur de la souris n'est pas déplacé sur une seconde (ou troisième) div "mover". Lorsque cela se produit, vous pouvez obtenir plusieurs animations mises en attente comme ceci:

mover1.hover-over() 
mover2.hover-over() 

Par défaut, l'appel se termine stop que l'animation en cours - l'animation initiée pour le premier moteur, et non l'animation mis en attente pour le deuxième moteur.

Vous pouvez empêcher les autres animations de fonctionner en décochant la file d'attente d'animation lorsque vous appelez stop, qui accepte un paramètre optionnel clearQueue:

$(document).ready(function(){  
    $("div.mover").hover(function() { 
     $("div.hide1").fadeTo("slow", 0.33).fadeTo("slow", 1); 
    }, function(){ 
     // Added stop parameters and added an additional fadeTo, 
     // to make sure we get back to 100% opacity. 
     $("div.hide1").stop(true).fadeTo("slow", 1); 
    }); 
});