Question
j'ai le 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 fondre le fond de la souris au dessus du bouton
mais le problème si je passe la souris sur tous les boutons et après avoir quitté la souris l'animation continue jusqu'à ce que toutes ses transactions soient terminées.
Ce que je veux, c’est: quand la souris est partie, les boutons viennent à $ ("div.hide1"). fadeTo ("lent", 1); et arrêtez
La solution
Votre fonction initiale fonctionne correctement tant que le pointeur de la souris n'est pas déplacé au-delà d'un deuxième (ou troisième) "déplacement". div. Lorsque cela se produit, plusieurs animations peuvent être mises en file d'attente, comme suit:
mover1.hover-over()
mover2.hover-over()
Par défaut, l'appel de stop
ne met fin qu'à l'animation en cours - l'animation initiée pour le premier déplacement, pas l'animation mise en file d'attente pour le deuxième déplacement.
Vous pouvez empêcher l’exécution d’animations supplémentaires en effaçant la file d’animation lorsque vous appelez . stop
, qui accepte un paramètre facultatif 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);
});
});