I metodi hide, show, toggle, fadeIn, fadeOut e fadeToggle consentono di realizzare semplici animazioni, ma la vera potenza di jQuery si manifesta con il metodo animate. Prima di vedere nei dettagli il suo funzionamento, consideriamo un semplice esempio:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("h1").animate({fontSize: "50px"});
});
});
</script>
</head>
<body>
<h1>Titolo che si ingrandisce</h1>
<p>Clicca sul bottone qui sotto:</p>
<p id="avviso"></p>
<button id="btn">Animate</button>
</body>
</html>
Facendo clic sul pulsante #brn viene invocato il metodo animate sull'elemento h1:
Il risultato è che la proprietà fontSize (dimensione dei font) di h1 viene variata dal valore corrente iniziale (qualunque esso sia) fino al valore specificato (nel nostro caso 50px). In pratica se le dimensioni iniziali dei caratteri di h1 sono inferiori ai 50px, si osserverà il testo che si ingrandisce fino a raggiungere i 50px (viceversa il testo si ridurrà fino a 50px).
Il bello di animate è che si possono far variare nello stesso modo tutte gli stili css di qualsiasi oggetto. L'unico vincolo è che si tratti di stili che hanno un valore numerico, come dimensioni, bordi, margini, posizione etc. Per esempio non si può usare animate per far variare i colori di un oggetto (però esistono opportuni plugin nel repository di jQuery che consentono di ottenere anche questi effetti).
Facciamo ancora un altro esempio per comprendere la potenza di animate, prima di passare a discutere nel dettaglio la sua sintassi (invero leggermente complessa):
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
#block {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(
function() {
// Qui bisogna scrivere il codice da eseguire all'avvio
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
}
);
</script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Ciao mondo!</div>
</body>
</html>
In questo caso vengono animate contemporaneamente molte proprietà del div #block e viene inoltre indicato un valore di velocità di 1500 millisecondi (la durata dell'animazione).
Il lettore può verificare per proprio conto il risultato qui sotto:
precedente
Sito realizzato in base al template offerto da
http://www.graphixmania.it
