La coda degli effetti

La "rinascita" di JavaScript e la sua
diffusione nel web 2.0 è senza dubbio legata alle librerie di animazione. Passando per Scriptaculous e Moo.Fx, la possibilità di creare effetti dinamici senza ricorrere ad interfacce interamente
realizzate in Flash ha rappresentato per molti sviluppatori una valida ragione per affacciarsi a JavaScript.

Anche jQuery incorpora una serie di metodi nativi per la realizzazione di effetti grafici.

La coda degli effetti.

Una caratteristica comune a tutti gli effetti di jQuery è quella di essere inseriti di default in una coda generale. Questo approccio garantisce che ogni animazione parta quando la precedente è conclusa, in modo da evitare sovrapposizioni, errori o brutti sfarfallii sullo schermo.

Nonostante la coda degli effetti sia predefinita, è possibile interagirvi attraverso due metodi specifici: .queue() e .dequeue().

Passando a .queue() una stringa con il nome della coda ("fx" di default) è possibile anzitutto determinare quali funzioni siano presenti nella coda:

var coda = $("div").queue("fx");
//Il valore restituito è un array di funzioni

Passando invece una funzione, questa verrà eseguita alla fine della coda. Ecco un codice di esempio:

function effetti () {
    //effetto 1
    $("div").show("slow");

    //effetto 2
    $("div").animate({left:'+=200'},2000);
    
    //alla fine dell'effetto 2 esegui questa funzione
    $("div").queue("fx",function () {        
        $(this).addClass("nuovaClasse");
        //.dequeue() riavvia la coda
        $(this).dequeue();
    });
    
    //effetto 3
    $("div").animate({left:'-=200'},500);
    //effetto 4    
    $("div").slideUp();
}

  

Una volta che la funzione effetti() sarà lanciata, la coda di default "fx" verrà riempita man mano con le animazioni e verrà interrotta a metà da .queue() per poi essere ripresa grazie a .dequeue().

Nel caso volessimo invece rimpiazzare la coda di effetti, possiamo indicarli all'interno di un array e passarlo al metodo:

//Nuova coda da sostituire con quella corrente
var nuovaCoda = [
	function () { $(this).show() }, //mostra elemento
	function () {$(this).hide() } //nascondi elemento
];

//Sostituisco la coda
$("div").queue("fx",nuovaCoda);

//Cancello la coda con un array vuoto 
$("div").queue("fx",[]);

Come visto nell'esempio precedente il metodo .dequeue() viene utilizzato per lanciare immediatamente la prossima funzione nella coda. Anche questa funzione accetta come parametro il nome della coda,
che è di default sempre "fx".