Come creare animazioni personalizzate in jQuery
Le animazioni aggiungono vari effetti di abbellimento per coinvolgere gli spettatori. JQuery supporta un lungo elenco di metodi per eseguire varie operazioni. Il metodo JQuery Animate () viene utilizzato per la creazione di animazioni personalizzate in jQuery. Le proprietà CSS sono il principale stakeholder del metodo JQuery Animate (). Queste proprietà possono essere animate a varie velocità con vari valori. Questo post mira a fornire linee guida dettagliate sulle animazioni in jQuery con i seguenti risultati di apprendimento
- Meccanismo di lavoro del metodo animate ()
- Creazione di animazioni personalizzate (usando esempi)
Il metodo come animare () funziona in jQuery
Il metodo animate () utilizzato per creare animazioni ha la seguente sintassi.
$ (selettore).animate (css, velocità, callback);La sintassi fornita sopra ha le seguenti istanze
- selettore può essere qualsiasi nome, classe o ID di un elemento
- IL CSS Parte del metodo Animate () è obbligatoria per le animazioni e la proprietà CSS che si desidera animare si troverebbe nel CSS parte della sintassi
- IL velocità definisce il durata dell'animazione e può essere impostato su "veloce", "lento" o in millisecondi (valore numerico)
- Infine, il richiamare è un parametro opzionale e viene utilizzato per mostrare un po 'di elaborazione dopo l'esecuzione dell'animazione
La sintassi animate () elabora il valore numerico per l'alterazione del CSS. Ad esempio, la proprietà di sfondo non può essere impostata utilizzando il nome del colore pertanto la proprietà CSS Color non è inclusa nelle animazioni jQuery. Inoltre, i nomi delle proprietà devono essere in caso di cammello come BorderColor, Borderwidth e così via.
Come creare animazioni personalizzate in jQuery
Come discusso in precedenza, il metodo animate () viene praticato per creare animazioni jQuery. Il metodo animate può essere utilizzato nei seguenti scenari
Animazioni multiple contemporaneamente: Tutte le animazioni specificate vengono eseguite in un singolo GO.
Animando le proprietà CSS una per una: In questo caso, il metodo animate () viene applicato in modo sequenziale (uno dopo l'altro).
Animazione del valore relativo: Di solito le proprietà CSS sono animate utilizzando il valore corrente di una proprietà CSS. Tuttavia, il metodo animate () consente di eseguire animazioni dinamiche usando il fenomeno del valore relativo.
Praticheremmo i possibili modi nei prossimi esempi.
Esempio 1: più animazioni contemporaneamente
Quasi tutte le proprietà CSS possono essere animate usando il metodo Animate (). Questo esempio illustra l'effetto di animazione jQuery () usando più proprietà CSS.
Nel codice sopra,
- Varie proprietà CSS (larghezza, altezza e dimensione del carattere) dell'elemento Div saranno animati
- La velocità è impostata per rallentare
Produzione
Prima dell'animazione
Dopo l'animazione
Esempio 2: uno dopo l'altro
L'effetto di animazione può essere abbellito animando le proprietà CSS una per uno. Diamo un'occhiata a questo metodo.
Il codice sopra esercita l'animazione su a div elemento ed è spiegato di seguito
- IL imbottitura, altezza, larghezza e larghezza di confine con vari valori di velocità
- In primo luogo, l'imbottitura sarà seguita in altezza, larghezza e larghezza di confine
Produzione
Prima di animare
Dopo aver animato
Esempio 3: valori relativi
I valori relativi vengono generati usando due operatori di assegnazione “+=” e “-=”. Il valore corrente della proprietà CSS viene preso come valori di riferimento e i nuovi valori vengono generati aggiungendo/sottraendo un valore numerico da quel valore di corrente.
Nel codice sopra,
- La larghezza e l'altezza del div saranno animate
- Ad ogni clic (nel nostro caso), la larghezza aumenterà di 10px mentre l'altezza sarà ridotta di 5px.
Produzione
Prima dell'animazione,
Dopo più clic,
Esempio 4: usando i valori stringa
Il metodo animate () accetta solo tre valori di stringa (Nascondi, mostra o attiva) per le proprietà CSS. La proprietà a levetta può animare la proprietà nascosta da mostrare e viceversa.
Nel codice sopra, il mostrare e attivare Le operazioni vengono eseguite su larghezza e altezza rispettivamente. Per questo, abbiamo usato Button Class = "interruttore"E class ="spettacolo" .
Produzione
Prima dell'animazione,
Dopo aver fatto clic sul pulsante a disattivazione della larghezza, la larghezza cambierà il suo stato (per nascosto così com'è nella "spettacolo"Stato) come si può vedere nella seguente immagine.
Se fai clic sul pulsante Show, allora visualizzerebbe di nuovo il div.
Le animazioni hanno un ruolo chiave nel seguire qualsiasi contenuto. Seguendo questi esempi, avresti imparato la creazione personalizzata di animazioni in jquerry.
Conclusione
Il metodo animate () viene utilizzato per creare animazioni personalizzate in jQuery. Il metodo animate () può essere applicato per animare più proprietà CSS contemporaneamente o può essere applicato anche in modo sequenziale. Questo articolo fornisce una guida dettagliata sulla creazione di animazioni personalizzate in jQuery. Otterresti una comprensione del metodo animate () (stakeholder primario per le animazioni). Inoltre, sono dimostrati diversi esempi che mostrano la creazione di animazioni personalizzate in jQuery.