jQuery offre un modo semplice e veloce per animare gli elementi HTML all'interno della pagina. In questa lezione, vediamo come funziona il metodo .animate().
Il metodo .animate() permette di animare gli elementi all'interno delle pagine HTML.
La sintassi è: $(selettore).animate({proprietà}, tempo, funzione). Vediamo i parametri da utilizzare:
fontSize (grandezza del testo) o width (larghezza). Devono essere nel formato degli oggetti JavaScript, quindi: {proprietà: "valore", proprietà: "valore",...}.Vediamo un esempio di un <div>, cambiando la sua larghezza.
<div id="es" style="width:200px;height:50px;background-color:lightgreen">Ciao</div>
<script>
$("#es").animate({width: "300px"},"slow");
</script>Il parametro proprietà accetta qualsiasi proprietà CSS numerica. Basta sostituire il "-" con la maiuscola della parola successiva, ad esempio: font-size diventa fontSize, padding-left diventa paddingLeft, e così via.
<div id="es" style="width:200px;height:50px;background-color:lightgreen">Ciao</div>
<script>
$("#es").animate({
width: "300px",
fontSize: "20px",
marginLeft: "50px",
paddingLeft: "50px"
}, 2000);
</script>Si possono anche eseguire animazioni multiple, una dopo l'altra:
<div id="es" style="width:200px;height:50px;background-color:lightgreen">Ciao</div>
<script>
$("#es").animate({width: "300px"}, "fast");
$("#es").animate({height: "300px"}, "slow");
$("#es").animate({fontSize: "30px"}, 1000);
$("#es").animate({width: "100px"});
</script>Nelle proprietà CSS, si possono anche utilizzare i seguenti valori predefiniti:
hide, che nasconde la proprietà. Ad esempio, se è la larghezza (width), l'elemento verrà nascosto.show, che mostra la proprietà. Ad esempio, se è la larghezza (width), l'elemento verrà mostrato.toggle, che mostra e nasconde la proprietà alternativamente.Vediamo un esempio per capire:
<button>Apri/Chiudi il div</button>
<div id="es" style="width:200px;height:50px;background-color:lightgreen">Ciao</div>
<script>
$("button").click(function(){
$("#es").animate({width: "toggle"}, "slow");
});
</script>