jQuery: come utilizzare correttamente la funzione .stop()?

Question

In questa pagina:

http://www.arvag.net/old/smsbox.de/

quando si passa sopra "Informationen" e "Über ins", mostra un sottomenu. Quando sposti il ​​mouse, si nasconde. Normalmente, ho problemi con jQuery in coda ogni singolo hover che faccio, e poi continua ad animare tutti quegli hover. Ho provato a implementare stop(), ma non riesco a farlo funzionare correttamente.

Questo è il codice che sto usando:

<script type="text/javascript"> 
    //<![CDATA[ 
    $(function(){ 
     $('#nav_menu > .center > ul > li').hover(function() { 
      $(this).stop(true,true).children('ul').slideToggle('slow'); 
     }).click(function(){ 
      return false; 
     }); 
    }); 
    //]]> 
</script> 

Grazie!

Answer 1

È necessario .stop() in entrambe le direzioni per fermare la coda, in caso contrario la parte mouseenter del passaggio del mouse continua a fare la coda è animazioni. Inoltre, dal momento che stai commutazione, è possibile ridurre in giù come questo:

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul').stop(true,true).slideToggle('slow'); 
}).click(function(){ 
    return false; 
}); 

si avrebbe bisogno il .stop() sulle ul elementi, dato che è quello che sta animando. Prova questo, vedrai che è ancora un po 'goffo perché sta ripristinando l'animazione anziché l'accodamento. Un'alternativa è quella di evitare che la coda, come questo utilizzando le :visible e :hidden selettori ... io preferisco questo effetto, ma spetta a voi :)

$('#nav_menu > .center > ul > li').hover(function() { 
    $(this).children('ul:hidden').slideDown('slow'); 
}, function() { 
    $(this).children('ul:visible').slideUp('slow'); 
}).click(function(){ 
    return false; 
}); 

Answer 2

Credo che sia necessario inserire stop(true,true) nella parte del passaggio del mouse. Quindi interrompe le altre animazioni in corso al momento per eseguire il proprio, a meno che non mi sbagli.

$('#nav_menu > .center > ul > li').hover(function() { 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    },function(){ 
     $(this).stop(true,true).children('ul').slideToggle('slow'); 
    }).click(function(){ 
     return false; 
    });