jQuery: CSS e animazioni

In questo articolo vorrei affrontare il discorso inerente il rapporto tra le proprietà e i valori CSS e le animazioni jQuery ottenibili tramite il metodo animate(). Questo rapporto deve essere chiaro se si vogliono creare animazioni di una certa complessità.

Step e valori CSS

Un'animazione jQuery si basa sul rapporto asimmetrico esistente tra il numero di fasi (step) di un'animazione e la durata dell'animazione stessa. Determinante in questo rapporto è il valore di easing scelto, che per impostazione predefinita è swing. Un'animazione jQuery modifica un valore iniziale di una proprietà CSS fino a portarlo al valore finale specificato dall'animazione. Per esempio:

$('#test').animate({
	left: 100
}, 800);

Supponendo che il valore iniziale della proprietà CSS left sia 0, possiamo renderci conto del rapporto tra step e valori CSS utilizzando il metodo step():

var step = 0;

$('#test').animate({
	left: 100
},
{

	duration: 800,
	
	step: function() {
	
		step++;
		
		console.log(step + ' ' + $(this).css('left'));
	
	}

});

Un ipotetico output sarebbe il seguente:

Step	Valore CSS
1	2px
2	3px
3	3px
4	4px

e così via fino a raggiungere il valore di 100 pixel. La progressione di valori è influenzata dal tipo di easing scelto: se avessimo scelto un tipo di easing linear i valori sarebbero stati diversi.

Proprietà CSS supportate da animate()

Il metodo animate() supporta le seguenti proprietà CSS:

1. Proprietà dei margini
2. Proprietà del padding
3. Larghezza a altezza
4. Interlinea
5. Dimensione dei font
6. Posizionamento
7. Visibilità
8. Opacità

Alcuni valori non standard comprendono:

1. hide
2. show
3. toggle

Per tutte le altre proprietà il supporto si può ottenere tramite plugin, come nel caso dei colori del testo e dello sfondo di un elemento.

Unità di misura

Un valore senza unità di misura viene considerato come espresso in pixel. Unità di misura come em, percentuali e pixel sono ugualmente supportate. Inoltre animate() supporta gli operatori di aggiunta e sottrazione di valori, che vanno usati sempre tra virgolette, ossia:

1. '+=100px'
2. '-=100px'

In questo caso al valore corrente della proprietà viene aggiunto o sottratto il valore specificato da questi operatori. Esempio:

$('#test').animate({
	left: 100
}, 800, function() {

	$(this).animate({
		left: '-=100px'
	}, 800);

});

Specificità degli stili

Le animazioni modificano gli stili degli elementi usando l'oggetto style di ciascun elemento. Quindi il nostro primo esempio ha effettivamente questa struttura nel DOM:

<div id="test" style="left: 100px;">...</div>

Ciò significa che questi stili hanno una maggiore specificità rispetto agli stili normali del nostro CSS. Per resettare questi stili possiamo sia usare il metodo css(), che opera anch'esso sull'oggetto style, o usare gli stili del nostro CSS facendo in modo che abbiano una specificità maggiore. Questo si può ottenere sia con la cascata che con la dichiarazione !important.