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):

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

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

javascript.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:

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

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

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

Vedi anche