jquery fadein stop

Question

Tengo el siguiente 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>

mi función es desvanecer el fondo con el botón del mouse sobre el botón

pero el problema es si muevo el mouse sobre todos los botones y después de que el mouse dejó los botones la animación continúa hasta que complete todas sus transacciones.

lo que quiero es: como el mouse dejó los botones, la animación viene a           $ (" div.hide1 "). fadeTo (" lento " ;, 1); y parar

Answer 1

Su función inicial funciona bien siempre y cuando el puntero del mouse no se arrastre hacia afuera en un segundo (o tercero) " mover " div. Cuando eso suceda, es posible que tengas varias animaciones en cola como esta:

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

De forma predeterminada, al llamar a stop solo se finaliza la animación actual, la animación iniciada para el primer motor, no la animación en cola para el segundo.

Puede evitar que se ejecuten las animaciones adicionales borrando la cola de animación cuando llama a stop , que acepta un parámetro opcional 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);
    });
});