Vuoi imparare jQuery ma non sai da dove iniziare? Le animazioni personalizzate

jQuery

Nella scorsa lezione abbiamo dato un’occhiata veloce alle principali animazioni predefinite presenti in jQuery. Ma come fare ad applicare delle animazioni personalizzate? Oggi scoprirai come fare: iniziamo!

La funzione “.animate()”

Oltre a tutti metodi di animazione già visti, jQuery fornisce la funzione .animate() che ci permette di progettare le nostre animazioni. Questa funzione prende in ingresso quattro paramentri:

  • Un array con le proprietà e i rispettivi valori (simili a quello utilizzato per la funzione css. Obbligatorio
  • Una stringa (slow,normal,fast) oppure il numero di millisecondi rappresentanti la durata dell’animazione. Opzionale
  • Una stringa che descrive come deve essere svolta l’animazione (detta anche easing type). Opzionale
  • Una funzione, da eseguire al termine dell’animazione. Opzionale

La sintassi è dunque la seguente:

$("elemento_selezionato")
.animate( { proprietà1:valore, proprietà2:valore}, durata, easing, funzione_da_richiamare_al_termine);

Per il momento ignorerò gli ultimi due parametri, e mi concentrerò solo sui primi due, dato che sono più che sufficienti per le prime animazioni.

Come utilizzarla?

L’utilizzo della funzione animate è identico a quello della funzione css, con la differenza che in questo caso l’elemento passerà da un valore all’altro gradualmente, senza un brusco salto. Facciamo un esempio dunque. Prendiamo questo markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Animate!</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="esempio.js" type="text/javascript"></script>
    <style type="text/css">
      #box{
        width:50px;
        height:50px;
        background-color:#00F;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
</html>

Vogliamo aumentare le dimensioni dell’elemento #box. Potremmo farlo con la funzione css in questo modo:

$(document).ready(function() {
  $("#box").css({height: "400px", width: "400px"});
});

Come puoi vedere, non si riesce nemmeno a notare che c’è un passaggio da un div 50×50 ad uno 400×400. Proviamo allora con la funzione animate:

$(document).ready(function() {
  $("#box").animate({height: "400px", width: "400px"},"slow");
});

Così va molto meglio! Con questa funzione possiamo animare qualsiasi proprietà CSS che abbia un valore numerico, quindi margini, padding, bordi, altezza, larghezza, posizioni, opacità sono tutti candidati ideali. L’animazione avrà come punto iniziale quello specificato nel foglio di stile, e come punto finale quello specificato nel file JavaScript.

Nell’animazione precedente abbiamo visto come animare contemporaneamente due proprietà: infatti il nostro “box” cresceva allo stesso modo sia in altezza che il larghezza. Possiamo animare una proprietà (o gruppi di proprietà) per volta concatenando più chiamate alla funzione animate:

$(document).ready(function() {
  $("#box")
    .animate({height: "400px"},"slow")
    .animate({width: "400px"},3000)
    .animate({opacity: 0.2},1500);
});

Posso utilizzare solo valori numerici?

No. Per le proprietà height, width e opacity oltre a valori numerici, è possibile specificare anche dei valori testuali:

  • show: aumenta gradualmente la proprietà, se è già al massimo non fa nulla
  • hide: stessa cosa di show, però diminuisce il valore fino ad azzerarlo. Se è già zero non fa nulla
  • toggle: alterna show e hide. Se la proprietà è visibile, la nasconde, altrimenti la mostra

Grazie a quest’ultima proprietà possiamo realizzare animazioni ancora più complesse con meno righe di codice, che tengono conto del contesto. Prendiamo ad esempio questo markup:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"https://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Esempio - Continua a leggere...</title>
    <link rel="stylesheet" href="more.css" type="text/css" media="screen">
    <script src="../jquery.js" type="text/javascript"></script>
    <script src="more.js" type="text/javascript"></script>
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus nisl, ullamcorper a interdum ullamcorper, suscipit at lacus. Nunc egestas varius leo, ac egestas augue bibendum non. Duis ligula purus, pulvinar eu porttitor fermentum, ultricies a ipsum.</p>
    <a id="more" href="#">Mostra/Nascondi</a>
    <p>Questo paragrafo dovrebbe essere nascosto quando la pagina viene caricata. Dovrebbe essere mostrato solo quando viene cliccato il link appena sopra.</p>
  </body>
</html>

Possiamo nascondere e mostrare il secondo paragrafo semplicemente, con la funzione animate:

$(document).ready(function() {
  $("p:eq(1)").hide();
  $("a#more").click(function(){
    $("p:eq(1)").animate({opacity:'toggle'},"slow");
    return false;
  });
});

Ottenendo questo risultato. Ti avverto che questa non è una soluzione ottimale, dato che nel caso JavaScript fosse disattivato, non sarebbe possibile mostrare il paragrafo.

Quando si utilizza la funzione animate, però, bisogna stare attenti a non andar contro le regole dei CSS. Prendiamo come esempio questo semplice labirinto. L’HTML è una semplice immagine e un div. Il CSS associato è il seguente:

#omino {
  background-color:#00F;
  height:15px;
  left:0px;
  position:absolute;
  top:250px;
  width:15px;
}

Il codice che effettua l’animazione è invece il seguente:

$(document).ready(function() {
  $("#risolvi").click(function(){
    $("#omino")
    .css({top: 250,left:0})
    .animate({left:'+=60px'},'slow')
    .animate({top:'+=40px'},'slow')
    .animate({left:'+=115px'},'slow')
    .animate({top:'+=78px'},'slow')
    .animate({left:'+=300px'},'slow');
    });
});

Come puoi vedere, ho utilizzato la funzione animate per modificare le proprietà top e left, ma questo non avrebbe prodotto alcun movimento, se nel CSS non avessi posizionato assolutamente il div. È importante dunque pianificare con attenzione le animazioni.

Un’altra cosa che puoi notare nel codice JavaScript precedente, è l’utilizzo dell’operatore +=. Questo operatore permette di aggiungere una quantità relativa: invece di muovere l’elemento alla posizione “60px”, la muove di 60px rispetto a quella attuale.

Conclusioni

Abbiamo fatto un sacco di strada fino ad ora. Siamo partiti dai concetti base di jQuery, passando per la gestione degli eventi, le animazioni e, quest’oggi, le animazioni personalizzate. Questi concetti dovrebbero bastarti per cominciare a creare le tue prime funzioni utilizzando questo fantastico framework. Nelle prossime lezioni vedrai come questi concetti vengono applicati nel “mondo reale”: ti mostrerò infatti alcuni esempi di codice jQuery funzionanti al 100%.

Tag: , ,

L'autore

Appassionato di web design, si diletta a creare dei layout (X)HTML+CSS. È un maniaco del codice pulito e ordinato, il tipo di persona che vi ritrovate in casa a raddrizzarvi i quadri appesi alla parete. Ha deciso che diventerà un web designer con la “doppia vvu” maiuscola, e trascorre intere nottate sveglio per realizzare il suo sogno.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

15 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo