parada fadein jquery

Question

i ter seguinte 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>

minha função é a desvanecer-se fundo no mouse sobre o botão de

mas o problema se eu foco do mouse sobre todos os botões e depois mouse para a esquerda os botões animação keep continuar até que completar seus todas as transações.

o que eu quero é: como o rato deixou a animação botões vir a $ ( "Div.hide1") fadeTo ( "lento", 1).; e parada

Answer 1

A sua função inicial funciona bem, desde que o ponteiro do mouse não é arrastado para fora ao longo de um segundo (ou terceiro) div "mover". Quando isso acontece, você pode obter várias animações na fila como este:

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

Por padrão, chamando stop única termina a animação atual -. A animação iniciada para o primeiro motor, e não a animação na fila para o segundo motor

Você pode evitar que as animações adicionais da execução limpando a fila de animação quando você chamar stop , que aceita um clearQueue parâmetro opcional:

$(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);
    });
});