jQuery Ajout et suppression de classes 'actives' plus hover

Question

J'ai une liste de définitions avec des vignettes. Ils ont une opacité de 50% avec une classe 'pouce'. Lorsque survolé 100% opacité. Lorsque vous cliquez sur 100% opacité plus changez le 'pouce' en classe 'thumbactive'

Jusqu'à présent, mon code de merde fonctionne, seule chose est que je ne peux pas obtenir le tn sur 100% sur 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> 

Answer 1

Je voudrais juste déplacer vos paramètres d'opacité à la CSS et juste ajouter/supprimer des classes dans jQuery. En fait, si vous ne ciblez pas IE6, vous pouvez simplement utiliser :hover en CSS pour gérer l'opacité.

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

Changez ensuite votre hover à ceci:

jQuery("dd").hover(
    function() { jQuery(this).addClass('hover'); }, 
    function() { jQuery(this).removeClass('hover'); } 
); 

SANS SUPPORT IE6

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

Et retirez votre hover appel entièrement.

Answer 2

Lorsque vous cliquez ensuite souris du vol stationnaire hors fonction est encore appelée qui établit l'opacité retour à 0,5

Vous devriez en vol stationnaire sur function (Le deuxième argument de la fonction hover) vérifie et s'assure que la classe de l'objet n'est pas définie sur thumbActive.

Answer 3

Merci à tous les deux, je suis venu avec ceci:

 
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>