jQuery
Metodo jQuery. animato ()
Ricerca…
Sintassi
- (Selettore) .animate ({stili}, {opzioni})
Parametri
| Parametro | Dettagli |
|---|---|
| proprietà | Un oggetto di proprietà e valori CSS verso cui si muoverà l'animazione |
| durata | (valore predefinito: 400) Una stringa o un numero che determina la durata dell'esecuzione dell'animazione |
| facilitando | (predefinito: swing) Una stringa che indica quale funzione di andamento usare per la transizione |
| completare | Una funzione da chiamare una volta completata l'animazione, chiamata una volta per elemento abbinato. |
| inizio | specifica una funzione da eseguire quando inizia l'animazione. |
| passo | specifica una funzione da eseguire per ogni passaggio dell'animazione. |
| coda | un valore booleano che specifica se posizionare o meno l'animazione nella coda effetti. |
| progresso | specifica una funzione da eseguire dopo ogni passo dell'animazione. |
| fatto | specifica una funzione da eseguire quando termina l'animazione. |
| fallire | specifica una funzione da eseguire se l'animazione non riesce a completarsi. |
| specialEasing | una mappa di una o più proprietà CSS dal parametro styles e le corrispondenti funzioni di andamento. |
| sempre | specifica una funzione da eseguire se l'animazione si arresta senza aver completato. |
Animazione con callback
A volte abbiamo bisogno di cambiare la posizione delle parole da un posto a un altro o di ridurre le dimensioni delle parole e cambiare automaticamente il colore delle parole per migliorare l'attrazione del nostro sito Web o delle app web. JQuery aiuta molto con questo concetto usando fadeIn(), hide(), slideDown() ma le sue funzionalità sono limitate e svolge solo l'attività specifica che le assegna.
Jquery risolve questo problema fornendo un metodo sorprendente e flessibile chiamato .animate() . Questo metodo consente di impostare animazioni personalizzate che utilizzano proprietà css che danno il permesso di sorvolare i confini. per esempio se diamo la proprietà di stile css come width:200; e la posizione corrente dell'elemento DOM è 50, il metodo animato riduce il valore di posizione corrente dal valore css dato e lo anima a 150. Ma non dobbiamo preoccuparci di questa parte perché il motore di animazione lo gestirà.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$("#btn1").click(function(){
$("#box").animate({width: "200px"});
});
</script>
<button id="btn1">Animate Width</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
Elenco di proprietà di stile css che consentono il metodo .animate() .
backgroundPositionX, backgroundPositionY, borderWidth, borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderSpacing, margin, marginBottom, marginLeft, marginRight, marginTop, outlineWidth, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, height, width, maxHeight, maxWidth, minHeight, minWidth, fontSize, bottom, left, right, top, letterSpacing, wordSpacing, lineHeight, textIndent,
Velocità specificata nel metodo .animate() .
milliseconds (Ex: 100, 1000, 5000, etc.),
"slow",
"fast"
Easing specificato nel metodo .animate() .
| "swing" |
| "lineare" |
Ecco alcuni esempi con opzioni di animazione complesse.
Ad esempio 1:
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
opacity: "toggle"
}, 5000, "linear", function() {
$( this ).after( "<div>Animation complete.</div>" );
});
Ad esempio 2:
$("#box").animate({
height: "300px",
width: "300px"
}, {
duration: 5000,
easing: "linear",
complete: function(){
$(this).after("<p>Animation is complete!</p>");
}
});