Metodo stop

Il metodo stop ci permette di interrompere immediatamente un'animazione in esecuzione. L'animazione continuerà dalla funzione successiva senza completare la precedente.

Sintassi

In questo modo interrompiamo un'animazione in esecuzione. È possibile passare due parametri opzionali che accettano valori Booleani. Se il primo parametro è impostato su true, le funzioni rimanenti nella coda di animazione verranno rimosse e non verranno mai eseguite. Se il secondo parametro è impostato su true, all'interruzione dell'animazione le proprietà CSS dell'elemento assumeranno immediatamente i loro valori finali (cioè, se l'obiettivo era nascondere l'elemento gradualmente, questo verrà nascosto istantaneamente):

.stop([clearQueue], [jumpToEnd]);

È anche possibile passare un parametro opzionale, in cui viene specificato il nome della coda:

.stop([nome coda], [clearQueue],[jumpToEnd]);

L'animazione può essere disattivata globalmente, utilizzando l'impostazione jQuery.fx.off = true, che imposta il valore della durata a 0.

Esempio

Facciamo in modo che ad ogni clic sul pulsante #toggle il nostro rettangolo si espanda e si contragga utilizzando il metodo slideToggle. Premete il pulsante senza attendere il completamento dell'animazione - la fase successiva verrà avviata, senza attendere il completamento della precedente, grazie al metodo stop:

<button id="toggle">toggle</button>
<div id="test"></div>

#test {
	background-color: green;
	border: 1px solid black;
	width: 200px;
	height: 100px;
	margin: 10px;
}

$('#toggle').on('click', function() {
	$('#test').stop().slideToggle(1500);
});

Vedi anche

metodo clearQueue,
che permette di rimuovere tutti gli elementi non eseguiti dalla coda delle funzioni
proprietà jQuery.fx.off,
che permette di disattivare globalmente l'animazione