jquery fadein stop

Question

ho il seguente script

 <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>

la mia funzione è quella di sfumare lo sfondo al passaggio del mouse sul pulsante

ma il problema se passo il mouse su tutti i pulsanti e dopo il mouse ho lasciato i pulsanti l'animazione continua fino a quando non completa tutte le sue transazioni.

quello che voglio è: quando il mouse ha lasciato, l'animazione dei pulsanti arriva           $ (" div.hide1 "). fadeTo (" slow " ;, 1); e ferma

Answer 1

La tua funzione iniziale funziona bene fino a quando il puntatore del mouse non viene trascinato su un secondo (o terzo) "mover" div. Quando ciò accade, è possibile che vengano messe in coda diverse animazioni in questo modo:

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

Per impostazione predefinita, la chiamata di stop termina solo l'animazione corrente: l'animazione avviata per il primo mittente, non l'animazione in coda per il secondo mittente.

Puoi impedire l'esecuzione delle animazioni aggiuntive cancellando la coda delle animazioni quando chiami stop , che accetta un parametro facoltativo 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);
    });
});