jQuery adding and removing 'active' classes plus hover

Question

I have a definition list with thumbnails. They are 50% opacity with a 'thumb' class. When hovered 100% opacity. When clicked 100% opacity plus change 'thumb' to 'thumbactive' class

So far my crappy code works, only thing is I can not get the tn on 100% on click.

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

When you click then mouse off the hover out function is still being called which is setting the opacity back to .5

You should in the hover out function (The second argument to the hover function) check and make sure the class of the object isn't set to thumbActive.

Answer 2

I would just move your opacity settings to the CSS and just add/remove classes in jQuery. In fact, if you aren't targeting IE6 you can just use :hover in CSS to handle the opacity.

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

Then change your hover to this:

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

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

And just remove your hover call entirely.

Answer 3

Thanks to both, I came up with this:

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>