Interrompe l’impilazione delle animazioni jQuery

Ho una casella di opzioni che si libra in alto a destra della pagina web. L’opacità è impostata al 10% in modo da non essere ostruttiva per gli utenti. Quando passano il mouse su (mouseenter), uso jQuery per dissolverlo e far scorrere il contenuto (e il contrario su mouseout).

Se lo fanno ripetutamente anche se l’animazione si accumula e a volte può essere lasciata in una situazione in cui il tuo mouse è fermo ma la scatola è in giro.

Come posso aggirare questa situazione?

Ecco come attualmente settoro le animazioni

$("#dropdown").mouseenter(function() { $(this).fadeTo('fast',1); $("#options").slideDown(); }); $("#dropdown").mouseleave(function() { $(this).fadeTo('fast',0.1); $("#options").slideUp(); }); 

Nota Sto usando solo jQuery e non altri plugin.

Call stop per terminare eventuali animazioni esistenti prima di iniziarne una nuova. Probabilmente dovresti usare anche hover anziché mouseenter / mouseleave.

 $("#dropdown").hover(function() { $(this).stop().fadeTo('fast',1); $("#options").stop().slideDown(); }, function() { $(this).stop().fadeTo('fast',0.1); $("#options").stop().slideUp(); }); 

È ansible utilizzare il metodo stop che interrompe l’animazione e cancella la coda di animazione.

 $("#dropdown").mouseenter(function() { $(this).stop(true).fadeTo('fast',1); $("#options").stop(true).slideDown(); }); $("#dropdown").mouseleave(function() { $(this).stop(true).fadeTo('fast',0.1); $("#options").stop(true).slideUp(); }); 

Potresti anche cercare nel plugin hoverintent

Il problema con l’utilizzo di stop prima di un fadein() , come in questo esempio:

 $("#button").hover(function () { $("#light").stop().fadeIn(); }, function () { $("#light").stop().fadeOut(); }); 

È che il punto di arresto () avrà la dissolvenza in chiusura a qualsiasi opacità a cui l’elemento si è attenuato quando lo stato di hover è cambiato e inizierà alla stessa opacità quando si riaccenderà nuovamente.

Il risultato è che più hover rapidi alla fine svaniranno l’elemento e non si annulleranno di nuovo.

Puoi usare il metodo stop lì che penso.

Interrompe l’animazione attualmente in esecuzione sugli elementi corrispondenti.