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%

• jQuery Cambia immagine src con Effetto dissolvenza
• Best Practice (jQuery, CSS): come inizializzare elementi nascosti che si alterneranno visibili?
• fadeout, carica il nuovo contenuto, fadein -> slide
• Dissolvenza in nuove immagini di sfondo sullo scroll
• La galleria di immagini di JQuery non è sempre funzionante e la tragedia di IE è una soluzione

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:

• jquery hover image fade swap
• Fade in / fade out colore di sfondo di un elemento HTML con Javascript (o jQuery)
• jQuery fadeToggle se attualmente animato, ignora ulteriori input
• jquery aggiunge una dissolvenza a un .addClass
• jQuery Array fadeIn non funziona

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?

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