Nella lezione precedente, abbiamo visto come animare gli elementi nella pagina. In questa lezione, vediamo come terminare le animazioni con due metodi jQuery: .stop() e .finish().
Il metodo .stop() permette di fermare l'animazione in esecuzione di un elemento specificato.
La sintassi di questo metodo è: $(selettore).stop(stopTutto, vaiAllaFine). Vediamo a cosa servono i parametri:
true o false). Permette di specificare se devono essere terminate anche le animazioni in coda a quella in esecuzione. Se viene omesso, il valore predefinito è false.true o false). Permette di specificare se completare immediatamente tutte le animazioni oppure no. Se viene omesso, il valore predefinito è false.Nota: se non conosci i valori booleani, puoi dare un'occhiata alla lezione JavaScript.
Vediamo un esempio con .stop():
<button id="btn">Ferma l'animazione</button>
<div id="el" style="width:300px;height:0;background-color:red;"></div>
<script>
$("#el").animate({height:"200"},10000);
$("#btn").click(function(){
$("#el").stop();
});
</script>Nell'esempio, l'animazione di scorrimento verso il basso (tramite .animate()) inizia. Con l'evento di click, quando l'utente clicca sul pulsante, l'animazione si interrompe nella posizione in cui si trova.
Il metodo .finish() permette di terminare l'animazione in esecuzione e tutte quelle in coda, completando le animazioni e portando l'elemento alla "forma finale". È equivalente a .stop(true, true).
Sintassi: $(selettore).finish(). Questo metodo non accetta parametri.
Vediamo un esempio:
<button id="btn">Ferma l'animazione</button>
<div id="el" style="width:300px;height:100px;background-color:red;display:none"></div>
<script>
$("#el").slideDown(5000);
$("#el").animate({width:"200"},1000);
$("#el").animate({height:"50"},1000);
$("#btn").click(function(){
$("#el").finish();
});
</script>Nell'esempio, il <div> viene animato da tre diverse animazioni in coda: un .slideDown() (che abbiamo visto nella lezione dedicata) e due .animate(). Quando l'utente clicca sul pulsante, vengono interrotte tutte le animazioni e l'elemento raggiunge la posizione e la dimensione finale.