Il livello di trasparenza dell’immagine si dissolve al passaggio del mouse e rimane al 100% al clic

Sto lavorando con un mucchio di immagini in un div, quando la pagina viene caricata tutte le miniature sono il 30% di opacità. Non appena vai con il mouse sopra il pollice, si sfuma al 100%, se muovi con il mouse la miniatura, si dissolve di nuovo sul 30% di opacità. Questo bit funziona.

Ora, quando l’utente fa clic su una miniatura, deve rimanere al 100% di opacità. Non appena l’utente fa clic su un’altra miniatura, la miniatura “vecchia” deve ridursi al 30% e quella “nuova” deve rimanere al 100%. Questo bit è il problema in cui quando clicco su una nuova immagine la vecchia immagine non torna al 30% ma rimane al 100%

Codice di credito a: PatrikAkerstrand

Qualcuno può aiutare, per favore? Il codice è di seguito:

$(window).bind("load", function() { var activeOpacity = 1.0, inactiveOpacity = 0.3, fadeTime = 350, clickedClass = "selected", thumbs = "#boardDirectorsImage img"; $(thumbs).fadeTo(1, inactiveOpacity); $(thumbs).hover( function(){ $(this).fadeTo(fadeTime, activeOpacity); }, function(){ // Only fade out if the user hasn't clicked the thumb if(!$(this).hasClass(clickedClass)) { $(this).fadeTo(fadeTime, inactiveOpacity); } }); $(thumbs).click(function() { // Remove selected class from any elements other than this var previous = $(thumbs + '.' + clickedClass).eq(); var clicked = $(this); if(clicked !== previous) { previous.removeClass(clickedClass); } clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity); }); }); 

Immagini elencate in HTML:

 

Infine l’altro script per mostrare i dati:

 $( document ).ready(function() { $('#bod1').click(); }); $('#bod1').click(function() { $('#bodInfoContain').html('

NAME 1

'); }); $('#bod2').click(function() { $('#bodInfoContain').html('

NAME 2

'); });

Questo può essere fatto o sono sopra la mia testa?

Usa questo jQuery e funzionerà correttamente.

 $(window).bind("load", function() { var activeOpacity = 1.0, inactiveOpacity = 0.3, fadeTime = 350, clickedClass = "selected", thumbs = "#boardDirectorsImage img"; $(thumbs).fadeTo(1, inactiveOpacity); $(thumbs).hover( function(){ $(this).fadeTo(fadeTime, activeOpacity); }, function(){ // Only fade out if the user hasn't clicked the thumb if(!$(this).hasClass(clickedClass)) { $(this).fadeTo(fadeTime, inactiveOpacity); } }); $(thumbs).click(function() { // Remove selected class from any elements other than this $(thumbs).removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity); $(this).addClass(clickedClass).fadeTo(fadeTime, activeOpacity); }); });