Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

Supponiamo di avere una serie di elementi tutti uguali, per esempio una serie di list item a cui abbiamo assegnato la classe trasp, ossia il seguente codice

<li class=”trasp”>elemento 1 </li>
<li class=”trasp”>elemento 2 </li>
<li class=”trasp”>elemento 3 </li>
<li class=”trasp”>elemento 4 </li>

e supponiamo che al click del mouse su uno di essi vogliamo aumentare l’opacità del cliccato e diminuire l’opacità di tutti gli altri.

Quindi vogliamo applicare una data opacità a tutti gli elementi con classe trasp tranne a quello attuale, ossia a quello cliccato.
Questo è possibile utilizzando il metodo .not() che “sottrae” agli elementi selezionati, tutti quelli corrispondenti al selettore passato come parametro al .not().

Ecco un esempio che chiarirà tutto:

$(document).ready(function(){
        $(‘.trasp’).fadeTo(‘fast’,0.70);
        $(‘.trasp’).click(function(){
                $(this).fadeTo(‘fast’,1);                                          
                $(‘.trasp’).not(this).fadeTo(‘fast’,0.30);
               
        });
});

In questo esempio abbiamo selezionato tutti gli elementi con classe trasp e poi mediante .not(this) gli abbiamo sottratto l’elemento cliccato.

Volevamo far notare che l’opacità iniziale agli elementi della lista l’abbiamo assegnata con il comando $(‘.trasp’).fadeTo(‘fast’,0.70); e non tramite i css, questo per evitare ogni tipo di problema dovuto alla diversa gestione di questa proprietà da parte dei browser.

Ovviamente lo stesso risultato si poteva ottenere:

$(document).ready(function(){
        $(‘.trasp’).fadeTo(‘fast’,0.70);
        $(‘.trasp’).click(function(){
                $(‘.trasp’).fadeTo(‘fast’,0.30);
                $(this).fadeTo(‘fast’,1);                                          
        });
});

Twitter