Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

La coda degli effetti

capire il meccanismo fondamentale che regola l'esecuzione di animazioni
capire il meccanismo fondamentale che regola l'esecuzione di animazioni
Link copiato negli appunti

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".

Ti consigliamo anche