Problema dell'effetto hover JQuery

Question

Ho creato un semplice script JQuery con effetto hovering su alcuni link. Lo script funziona bene come puoi vedere qui: Test Sample ... (Prova su qualsiasi browser diverso da IE)

Ma se posiziono il cursore velocemente sui link, noterai che le icone delle immagini non scompaiono come richiesto. Ho provato di tutto per risolvere questo problema, ma non riesco a trovare una soluzione adatta.

La domanda ora: Come posso essere sicuro che l'effetto mouseOut hover sia applicato dopo che l'effetto mouseOver hover è stato completato?

Answer 1

Devi applicare stop () agli elementi che sono stati animati. Prova questo:

function hide_frame() {
   var hoveredLang = $(this).parent();              
   hoveredLang
      .find('.language-name').stop(true, true)
      .find('.download-img').stop(true, true)
      .find('.info-img').stop(true, true);
   //eccetera...

Answer 2

Poiché l'effetto dell'animazione ha una durata fino al completamento, è necessario gestire i casi in cui si verifica il passaggio del mouse / disinserimento durante l'animazione.

Uso la funzione stop di JQuery ( http: //docs.jquery. com / Effetti / stop )

Eg.

$ (" selettore di "). Fermare (vero vero,) .youreffect (.....);

Provalo.