Il metodo animate in jQuery

Tutti i metodi che abbiamo analizzato nelle lezioni precedenti sono in qualche modo limitati - fanno esattamente ciò per cui sono stati creati. Se hai bisogno di un maggiore controllo sull'animazione - usa il metodo universale animate.

Come primo parametro, questo metodo accetta un oggetto, in cui dovresti impostare i nuovi valori delle proprietà CSS che desideri animare. E come secondo parametro - il tempo di esecuzione dell'animazione.

Implementiamo questo metodo sul seguente codice HTML:

<button id="button">click me</button>
<div id="elem">text...</div>

Lascia che il CSS appaia così:

#elem {
	width: 150px;
	height: 150px;
	padding: 10px;
	border: 1px solid green;
}

Facciamo in modo che quando si clicca sul pulsante l'elemento si riduca alle seguenti dimensioni: altezza - 50px, larghezza - 100px:

$('#button').click(function() {
	$('#elem').animate({height: 50, width: 100}, 1000);
});

Se specifichi il valore in questo formato height: '+=50', l'animazione funzionerà così: al valore corrente dell'altezza verrà aggiunto 50px (nel nostro caso) e l'elemento sarà animato in modo fluido fino al nuovo valore. Vediamo con un esempio:

$('#button').click(function() {
	$('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

Per maggiori dettagli sul metodo animate, consulta il manuale jQuery.

animate

C'è questo markup:

<body>
	<div id="block"></div>
</body>

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	cursor: pointer;
	margin-bottom: 20px;
}

Fai in modo che quando si clicca sul div con #block la sua larghezza aumenti fino a 200px in 1100ms.

Usa il markup dalla prima attività. Fai in modo che ad ogni clic sul div con #block la sua larghezza aumenti di 200px e ogni tale aumento avvenga in 900ms.

Usa il markup dalla prima attività. Fai in modo che ad ogni clic sul div con #block, la sua larghezza e altezza aumentino di 100px e ogni tale aumento avvenga in 950ms.

Usa il markup dalla prima attività. Fai in modo che ad ogni clic sul div con #block, esso si sposti a destra di 100px e ogni tale spostamento avvenga in 700ms.