BitTrack

Per eseguire un effetto però ho bisogno di un oggetto su cui lavorare e si da il caso che si tratti proprio dell’elemento che ho appena cliccato! Come fare per individuare esattamente quell’elemento della lista piuttosto che un altro? Usando $(this).
Si tratta di un selettore molto utile che, in questo caso, fa riferimento all’oggetto della funzione click().

Cosa sia esattamente this non è semplice da spiegare (almeno per me), è una cosa che si riesce a comprendere a pieno soltanto con l’esperienza.
Per ora ti basta sapere che, una volta fatto click su un elemento della lista, this indicherà esattamente quell’elemento; quindi non resta altro da fare che far partire l’effetto desiderato con animate().

Animate

Animate() è una funzione molto potente che ci permette di manipolare l’oggetto desiderato, cambiandone lo stile per mezzo di animazioni. Quando parlo di stile, intendo lo stesso che usiamo nei css. Per esempio, in questo caso dobbiamo aumentare la larghezza fino a 400px, scriverò:

$(this).animate({width: "400px"});

Come vedi, i parametri dell’animazione (quelli tra parentesi graffe) vengono indicati in modo molto simile alle dichiarazioni del css (fatta eccezione per le virgolette).
Altra cosa da notare, è il fatto che, come ti avevo preannunciato l’altra volta, i parametri di una funzione seguono una loro precisa formattazione.
Nel caso di animate() devi inserire i parametri dell’animazione vera e propria dentro parentesi graffe e se vorrai indicare la durata dell’effetto (come nel nostro caso), dovrai inserirla al di fuori delle parentesi preceduta da una virgola, in questo modo.

$(this).animate({width: "400px"}, 1000);

Questo è ciò che abbiamo ottenuto:

• Segui
• i tutorial
• di jquery
• su
• BitTrack.it

Eseguire la funzione inversa facendo click sullo stesso elemento

L’animazione è riuscita alla grande, ma vediamo di rendere il nostro script più completo, facendo in modo che, cliccando una seconda volta sugli elementi la cui larghezza è aumentata, questi tornino alla situazione di partenza con un’altra animazione.

Anche quì ci sono molte strade, ma la pratica più usata consiste nell’assegnare una classe agli elementi la cui larghezza è stata portata a 400px, dopo di che, se viene fatto nuovamente click su uno di questi elementi, attraverso un controllo, saremo in grado di capire se la larghezza di quel dato elemento sia da aumentare o diminuire, a seconda che quella classe sia presente o no.

Anche in questo caso risulta troppo difficile da spiegare a parole, quindi passiamo ai fatti.

<script type="text/javascript">

$(document).ready(function(){

    $("#animazione li").click(function(){
        if($(this).hasClass("largo")){
            $(this).removeClass("largo").animate({width: "200px"}, 1000);
        } else{
            $(this).addClass("largo").animate({width: "400px"}, 1000);
        }
    });

});

</script>

Analizzando il codice: come punto di partenza abbiamo sempre il click su un elemento della lista.

    $("#animazione li").click(function(){
        //...
    });

Dopo di che, se quel preciso elemento possiede la classe largo (nome a caso scelto da me con molta fantasia) e quindi è già lungo 400px, riportalo a 200px e toglili la classe largo.

if( $(this).hasClass("largo") ) {
    $(this).removeClass("largo").animate({width: "200px"}, 1000);
}

Altrimenti (cioè se non possiede quella data classe), aumenta la lunghezza a 400px e aggiungigli la classe largo.

else{
    $(this).addClass("largo").animate({width: "400px"}, 1000);
}

Ecco il risultato finale:

• Segui
• i tutorial
• di jquery
• su
• BitTrack.it

Mi scuso se sono andato un po’ di fretta in questi ultimi passaggi, nonostante abbia utilizzato funzioni molto utili ed importanti tipo hasClass(), addClass, removeClass, ma il loro significato è talmente intuitivo ed evidente che non mi sembrava il caso di perderci troppo tempo.

Fine

Anche questa “lezione” è finita, spero di riuscire a pubblicare le prossime più velocemente, poichè gli argomenti da trattare su jQuery sono tantissimi, devo solo scegliere l’ordine da seguire. Come al solito, se hai suggerimenti o critiche, i commenti sono a tua disposizione. Alla prossima.