jQuery adición y eliminación de clases 'activos' más libración
-
21-09-2019 - |
Pregunta
Tengo una lista de definición con imágenes en miniatura. Son 50% de opacidad con una clase de 'pulgar'. Cuando se cernía 100% de opacidad. Cuando se hace clic% de opacidad 100 más el cambio 'pulgar' a la clase 'thumbactive'
Hasta ahora funciona mi código de basura, lo único es que no puedo conseguir el TN el 100% al hacer clic.
dl { width: 700px; } dt { clear: left; float: right; width: 400px; height:80px; margin: 0 0 10px 0; background:orange; } dd.thumb, dd.thumbActive { clear: none; float: left; margin: 0 0 10px 0; background:black; } dd { clear: right; }
jQuery.noConflict(); jQuery(document).ready(function() { /* just for debugging */ function showClassNames() { jQuery("dt").each(function() { var className = jQuery(this).next().attr('class'); jQuery(this).text(className); }); }; showClassNames(); /* resets all thumbs (50% alpha, .thumb classname) */ function resetThumbs() { jQuery("dd").each(function() { jQuery(this).removeClass("thumbActive"); jQuery(this).addClass("thumb"); jQuery("dd img").css('opacity', 0.5); }); }; // half opacity for all thumbs except the first one (active) jQuery("dd:not(.thumbActive) img").css('opacity', 0.5); jQuery("dd img").hover( function() { jQuery(this).css('opacity', 1.0); }, function() { jQuery(this).css('opacity', 0.5); } ); jQuery("a.thumbClick").click(function() { resetThumbs(); jQuery(this).parent().removeClass("thumb"); jQuery(this).parent().addClass("thumbActive"); jQuery(this).css('opacity', 1.0); showClassNames(); return false; }); }); // end document ready
<div id="album-canvas-left" style="width:930px; " >
<dl id="thumb-list" >
<dt></dt>
<dd class="thumbActive"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
<dd></dd>
</dl>
Solución
Me gustaría simplemente mover los ajustes de opacidad a la CSS y sólo tiene que añadir / eliminar clases en jQuery. De hecho, si no se dirigen a IE6 sólo se puede utilizar en :hover
CSS para manejar la opacidad.
CON IE6 SUPPORT
dd img{
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
dd.hover img, dd.thumbActive img {
opacity: 1.0;
-moz-opacity: 1.0;
filter:alpha(opacity=100);
}
A continuación, cambiar su hover
a esto:
jQuery("dd").hover(
function() { jQuery(this).addClass('hover'); },
function() { jQuery(this).removeClass('hover'); }
);
SIN IE6 SUPPORT
dd img{
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity=50);
}
dd:hover img, dd.thumbActive img{
opacity: 1.0;
-moz-opacity: 1.0;
filter:alpha(opacity=100);
}
Y basta con retirar su llamada hover
por completo.
Otros consejos
Al hacer clic a continuación ratón fuera del vuelo estacionario sin función todavía está siendo llamada que está poniendo la opacidad de nuevo a 0.5
Debe en el vuelo estacionario sin función (el segundo argumento de la función flotar) comprobar y asegurarse de que la clase del objeto no está ajustado a thumbActive.
Gracias a los dos, se me ocurrió esto:
dd img { opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50); } /* IE6 does not support :hover */ dd.hover img { opacity: 1.0; -moz-opacity: 1.0; filter:alpha(opacity=100); }
jQuery("dd").hover( function() { jQuery(this).addClass('hover'); showClassNames(); }, function() { if (!jQuery(this).hasClass('active')) jQuery(this).removeClass('hover'); } ); jQuery("a.thumbClick").click(function() { jQuery("dd").removeClass("hover active"); jQuery(this).parent().addClass("hover active"); return false; });
<dl id="thumb-list" >
<dt></dt>
<dd class="thumb hover active"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/001.jpg" width="120" height="80" alt="living room" title="living room" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/002.jpg" width="120" height="80" alt="bedroom" title="bedroom" /></a></dd>
<dd></dd>
<dt></dt>
<dd class="thumb"><a href="#" class="thumbClick"><img src="gallery/album1/thumb/003.jpg" width="120" height="80" alt="kitchen" title="kitchen" /></a></dd>
<dd></dd>
</dl>