Il jQuery animate() metodo consente di creare animazioni personalizzate.
jQuery Animazioni - Il animate() Metodo
Il jQuery animate() metodo viene utilizzato per creare animazioni personalizzate.
Sintassi:
$(selector).animate({params},speed,callback);Il parametro params richiesto definisce le proprietà CSS per essere animati.
Il parametro di velocità opzionale specifica la durata dell'effetto. Esso può assumere i seguenti valori: "slow", "fast" , o millisecondi.
Il parametro di callback facoltativa è una funzione da eseguire dopo l'animazione completa.
L'esempio seguente mostra un semplice uso del animate() metodo; si muove un <div> elemento verso destra, fino a raggiungere una proprietà fianco di 250px:
Per impostazione predefinita, tutti gli elementi HTML hanno una posizione statica, e non possono essere spostati.
Per manipolare la posizione, ricordarsi di impostare prima la proprietà position CSS dell'elemento da relative, fixed , o absolute !
jQuery animate() - modificare le proprietà di più
Si noti che più proprietà possono essere animate allo stesso tempo:
Esempio
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Prova tu stesso " È possibile manipolare tutte le proprietà CSS con l' animate() metodo?
Sì, quasi! Tuttavia, c'è una cosa importante da ricordare: tutti i nomi di proprietà devono essere cammello-carter quando viene utilizzato con il animate() metodo: Dovrete scrivere paddingLeft invece di padding-left, marginRight invece di margin-right , e così via.
Inoltre, l'animazione colore non è incluso nella libreria di base jQuery.
Se si desidera animare il colore, è necessario scaricare il plug-in Colore animazioni da jQuery.com.
jQuery animate() - utilizzando i valori relativi
E 'anche possibile definire valori relativi (il valore è quindi relativo al valore corrente dell'elemento). Questo viene fatto mettendo += o -= davanti valore:
Esempio
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Prova tu stesso " jQuery animate() - utilizzando i valori predefiniti
È anche possibile specificare il valore di animazione di una proprietà come "show", "hide" , o "toggle" :
jQuery animate() - Usa coda Funzionalità
Per impostazione predefinita, jQuery è dotato di funzionalità di code per le animazioni.
Questo significa che se si scrive più animate() chiama dopo l'altro, jQuery crea una coda "interna" con queste chiamate di metodo. Poi si corre il animato chiama uno per uno.
Quindi, se si desidera eseguire diverse animazioni uno dopo l'altro, ci avvaliamo della funzionalità di coda:
esempio 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Prova tu stesso " L'esempio seguente prima sposta l'elemento <div> a destra, e quindi aumenta la dimensione del carattere del testo:
esempio 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»
jQuery Effetti di riferimento
Per una panoramica completa di tutti gli effetti jQuery, si prega di visitare il nostro jQuery Effetto di riferimento .