PROGRAMMIAMO
JS - La sintassi di animate
La sintassi di animate

Il metodo animate è molto potente e consente di realizzare animazioni molto complesse con poco sforzo, ma la sua sintassi non è forse delle più semplici:

$(selettore).animate({stili},speed,easing,callback) ;

I parametri indicati fra parentesi tonde sono:

Occorre subito dire che, a parte stili che è obbligatorio, tutti gli altri parametri sono opzionali, cioè possono essere omessi.

Bisogna poi notare che esiste anche una sintassi alternativa e perfettamente equivalente, che fa uso delle parole chiave duration, easing e complete:

$(selettore).animate({stili},{duration: speed,easing: easing,complete: callback}) ;

In pratica la stessa istruzione può essere scritta in due modi diversi, come mostra meglio l'esempio qui sotto:

// SINTASSI DI ANIMATE: PRIMA VERSIONE
$('#myDiv').animate(
    { opacity: 0 }, 	// quello che vogliamo animare
    'fast', 		// la velocità dell'animazione
    'swing', 		// il tipo di easing
    function() { 	// la funzione di callback
        alert('done');
    });
// SINTASSI DI ANIMATE: SECONDA VERSIONE
$('#myDiv').animate(
    { opacity: 0 }, 	  	// quello che vogliamo animare
    {
        duration: 'fast',  	// la velocità dell'animazione
        easing: 'swing',  	// il tipo di easing
        complete: function() { 	// la funzione di callback
            alert('done');
        }
    });

 

Gli stili: una sintassi che sembra inventata apposta per confondere le idee

Si è già detto che animate consente di animare tutti gli stili css che hanno un valore numerico. Oltre ai valori numerici è possibile utilizzare come valori anche le stringhe "show", "hide" e "toggle": in questo caso l'animazione mostrerà o nasconderà l'elemento che viene animato.

Non si possono invece animare gli stili che non hanno un valore numerico progressivo, come per esempio i colori. Esistono però opportuni plugin di jQuery che consentono di estendere la animazione anche ai colori.

L'elenco degli stili da animare va obbligatoriamente chiuso fra una coppia di parentesi graffe (anche se si intende animare un solo stile) e il nome dello stile dev'essere separato dal suo valore dai due punti. Si considerino gli esempi seguenti:

$('div').animate({height: '300px'});               // varia l'altezza fino a 300px
$('p').animate({top: '100px', left: '50px'});     // sposta p nella posizione indicata

Si osservi come i valori vadano (prudenzialmente) racchiusi fra apici (singoli o doppi) e ogni coppia di proprietà e valore vada separata con una virgola dalla successiva. Il nome dello stile da animare invece non deve essere messo fra apici.

E' anche possibile indicare un valore incrementale o decrementale, in questo modo:

$('div').animate({height: '-=30px'});               // varia l'altezza diminuendola di 30px
$('p').animate({top: '+=100px', left: '+=50px'});// sposta p rispetto alla posizione corrente

Per quanto riguarda i nomi degli stili, occorre notare che non sempre coincidono esattamente con i corrispondenti nomi usati nei fogli stile css. In particolare jQuery usa qui la notazione cosiddetta camel-case (a gobba di cammello) di modo tale che, per esempio, lo stile border-width diventa borderWidth, margin-bottom diventa marginBottom e così via.

Questa distinzione può certamente essere fonte di confusione per il programmatore in jQuery, poiché la convenzione sui nomi degli stili non è usata in modo conforme in tutto il codice. Per esempio, per modificare lo stile font-size usando il metodo css bisogna scrivere:

$("p").css("font-size","50px");

Per animare lo stesso stile con animate invece si deve scrivere:

$("p").animate({fontSize: "50px"}); 

Notate la differenza? Oltre tutto anche la sintassi è completamente diversa: in animate si usano le graffe e i due punti, invece della virgola di css e non bisogna mettere gli apici intorno al nome dello stile. Pura sadismo di chi ha inventato jQuery!

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it