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);					   
	});
});