Corsi on-line

jQuery: opacizzare tutte le immagini… tranne una!

Un sistema molto utile ed elegante per concentrare l’attenzione dei lettori su una determinata immagine quando questa viene raggiunta dal cursore del mouse, è quello di opacizzare tutte le altre, come nell’esempio seguente:

David Walsh, nel suo sempre interessante blog, propone un articolo dedicato all’utilizzo di questa tecnica tramite jQuery; il codice da utilizzare non è particolarmente complesso e si basa sul principio di applicare un effetto fade su tutte le immagini tranne quella intercettata dal puntatore del mouse:

$(document).ready(function() {
 //area 1
 $('.fade-area-1').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
 //area 2
 $('.fade-area-2').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
});

Nel medesimo blog è presente anche la procedura necessaria per ottenere lo stesso risultato con MooTools.

Post correlati
I più letti del mese
Tematiche