Come fermare l'animazione o l'effetto in jQuery

Come fermare l'animazione o l'effetto in jQuery

Le animazioni o gli effetti rendono il contenuto presentabile per gli utenti finali. JQuery offre vari metodi come Animate (), FadeIn (), Fadeout () ecc., Per aggiungere animazione o effetto. E se, vuoi fermare l'animazione o l'effetto? Puoi farlo anche tu, vediamo come?

Il metodo Stop () aiuta a fermare l'animazione o l'effetto in jQuery. Il metodo STOP fornisce funzionalità molteplici, come fermare l'animazione/effetto istantaneamente o sequenziale. Questo articolo dimostra i modi per fermare l'animazione o un effetto in jQuery.

Come fermare l'animazione o l'effetto in jQuery

Il metodo stop () in jQuery aiuta a fermare l'animazione o l'effetto che è in esecuzione. La sintassi del metodo stop () è mostrata di seguito.

$ (selettore).stop (clearqueue, jumptoend);

Il selettore potrebbe essere qualsiasi elemento HTML o classe/ID dell'elemento. Inoltre, il metodo Stop () offre due parametri (che sono opzionali ma non necessari)

  • Clearqueue: Accetta i valori booleani (vero o falso) e decide di fermare le prossime animazioni. IL falso(valore predefinito) Valore dirige che verrà interrotta solo l'animazione corrente e che altre animazioni in coda verranno avviate in seguito. Mentre il VERO Il valore termina all'animazione all'istante.
  • Jumptoend: Il suo valore predefinito è falso, se la VERO il valore viene assegnato quindi termina le animazioni e anche la coda viene cancellata.

La sintassi di cui sopra funziona per vari metodi jQuery come Fading (), Sliding (), Show (), Hide ().

Come fermare le animazioni in jQuery

Questa sezione pratica alcuni esempi che guidano per arrestare le animazioni in vari scenari usando il metodo Stop ().

Esempio 1: utilizzando il metodo Stop () senza parametri

Il codice sopra anima il larghezza del div con una velocità di millisecondi = "5000". Inoltre, il metodo Stop () interrompe l'animazione in corso.

Produzione

Prima di animare

Dopo aver applicato il metodo stop () in modo casuale (fermandosi ovunque)

Esempio 2: utilizzando il metodo stop () con i parametri

Il seguente metodo di stop () delle pratiche di codice utilizzando entrambi i parametri. E il valore del parametro è impostato su VERO.

Il codice sopra anima la proprietà di larghezza e quindi viene applicato il metodo Stop (True, True).

Produzione

Prima di fare qualsiasi azione

Dopo aver avviato l'animazione, quando viene fatto clic sul pulsante di arresto dell'animazione, l'animazione termina immediatamente.

Come fermare l'effetto di fading () in jQuery

Il metodo Stop () in jQuery può essere utilizzato anche per fermare un effetto. Il codice fornito di seguito esercita l'effetto di sbiadimento e quindi il metodo Stop () per fermare quell'effetto.

Il codice sopra faddes-out the div A velocità di 2500 millisecondi e il metodo di arresto vengono utilizzati per fermare il metodo di sbiadimento.

Produzione

Prima di iniziare/arresto del processo di dissolvenza

Dopo l'avvio del processo di sbiadimento, quando il pulsante di arresto viene fatto clic, il processo di sbiadimento verrà interrotto come mostrato nell'immagine seguente (nel nostro caso).

Conclusione

Il metodo stop () di jQuery viene utilizzato per fermare l'animazione o un effetto. Il metodo Stop () accetta due parametri e può essere applicato anche senza parametri. Entrambi i parametri sono di natura booleana e quindi i valori veri/falsi sono accettati solo. Avresti imparato l'applicazione del metodo Stop () per fermare l'animazione in jQuery. Inoltre, il metodo stop () è anche esercitata su un metodo Fadeout () in jQuery.