jQuery.animate(): come pro­get­ta­re le ani­ma­zio­ni per il tuo sito web

Il metodo jQuery.animate() offre numerose pos­si­bi­li­tà per la creazione di effetti e ga­ran­ti­sce la loro perfetta rap­pre­sen­ta­zio­ne su diversi browser. Questi vantaggi ne fanno un’ap­pli­ca­zio­ne ap­prez­za­ta dagli svi­lup­pa­to­ri e dalle svi­lup­pa­tri­ci per integrare ani­ma­zio­ni semplici o complesse nei siti web.

Che cos’è il metodo jQuery.animate()?

JQuery.animate() è una funzione della libreria jQuery che permette di creare ani­ma­zio­ni sui siti web. Questo metodo incide sulle proprietà CSS di un elemento HTML, ad esempio posizione, di­men­sio­ni, colore o tra­spa­ren­za. Inoltre è uti­liz­za­bi­le in modo efficace con altri metodi jQuery, come jQuery.find() o jQuery.on(). Con jQuery.css() è anche possibile definire gli stati iniziali delle proprietà CSS che passano quindi a de­ter­mi­na­ti valori di de­sti­na­zio­ne con un’ani­ma­zio­ne CMS: ad esempio puoi im­ple­men­ta­re jQuery in WordPress in modo facile e veloce.

Se desideri saperne di più sui concetti fon­da­men­ta­li di jQuery, ti con­si­glia­mo di seguire il tutorial su jQuery nella nostra guida.

La sintassi del metodo jQuery.animate()

La struttura di jQuery.animate() è la seguente:

$(selector).animate({properties}, duration, easing, complete);

• pro­per­ties: un oggetto con­te­nen­te le proprietà CSS e i formati di de­sti­na­zio­ne per l’ani­ma­zio­ne
• duration: indica la durata dell’ani­ma­zio­ne in mil­li­se­con­di
• easing: definisce una funzione di tran­si­zio­ne per adeguare l’andamento dell’ani­ma­zio­ne
• complete: funzione callback opzionale, ri­chia­ma­ta dopo il com­ple­ta­men­to dell’ani­ma­zio­ne

Quali tipologie di ani­ma­zio­ni sono possibili?

Il metodo jQuery.animate() è dotato di diverse opzioni per il controllo delle ani­ma­zio­ni, tra cui sequenze, cicli e funzioni di easing.

Ani­ma­zio­ni se­quen­zia­li

Per eseguire più ani­ma­zio­ni una dopo l’altra è possibile ri­chia­ma­re il metodo .animate() più volte in sequenza:

$("#myElement").animate({left: '250px'}).animate({top: '100px'});

Il con­ca­te­na­men­to sposta l’elemento prima 250 pixel da sinistra e poi 100 pixel verso il basso.

Cicli di ani­ma­zio­ne

È anche possibile eseguire un ciclo di effetti uti­liz­zan­do una funzione callback per ri­chia­ma­re nuo­va­men­te l’ani­ma­zio­ne:

function animateLoop() {
    $("#myElement").animate({left: '250px'}, 1000, function() {
        $("#myElement").animate({left: '0px'}, 1000, animateLoop);
    });
}
animateLoop();

La funzione per­so­na­liz­za­ta ani­ma­te­Loop() sposta l’elemento 250 pixel verso destra e quindi lo riporta indietro.

Funzioni di easing

Le funzioni di easing di jQuery.animate() ti per­met­to­no di mo­di­fi­ca­re l’andamento della velocità dell’ani­ma­zio­ne:

$("#myElement").animate({left: '250px'}, 1000, 'easeOutBounce');

In questo esempio, la funzione di easing “ea­seOut­Boun­ce” crea un effetto di smor­za­men­to nell’ani­ma­zio­ne dell’elemento verso destra.

Ani­ma­zio­ni durante lo scor­ri­men­to

Per far partire un’ani­ma­zio­ne durante lo scor­ri­men­to del sito web, utilizza l’evento jQuery.animate() on scroll:

$(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    var elementPos = $("#myElement").offset().top;
    if (scrollPos > elementPos - 300) {
        $("#myElement").animate({
            backgroundColor: "#ff0000"
            left: "0"
        }, 1000);
    }
});

Qui l’evento scroll (scor­ri­men­to) è unito alla finestra. La funzione si attiva a ogni scor­ri­men­to. Per prima cosa, $(window).scrollTop() rileva l’attuale posizione di scor­ri­men­to. Suc­ces­si­va­men­te, la posizione di myElement è de­ter­mi­na­ta da $("#myElement").offset().top. Se la posizione di scor­ri­men­to è 300 pixel più in alto rispetto alla posizione dell’elemento, viene ri­chia­ma­ta la funzione jQuery.animate(). In questo caso, il colore di sfondo diventa #ff0000 (rosso) e la posizione sinistra viene impostata a 0. L’ani­ma­zio­ne dura 1 secondo (1.000 mil­li­se­con­di).