Image transparency level fade on mouse over and stay 100% on click

问题

I am working with a bunch of images in a div, When the page is loaded all the thumbnails are 30% of opacity. As soon as you go with your mouse over a thumb it fades to 100%, if you move with your mouse out the thumbnail it fades back up on 30% of opacity. This bit works.

Now when the user clicks on a thumbnail it has to stay at 100% opacity. As soon as the user clicks on another thumbnail, the 'old' thumbnail has to fade back to 30% and the 'new' one has to stay at 100%. This bit is the problem wherein when i click on a new image the old image doesnt revert back to 30% but stays on 100%

Code credit to: PatrikAkerstrand

Can anyone help please? Code is below:

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

Images listed in HTML:

<div id="pageBodyContainerRight">
            <div id="boardDirectorsImage"><img src="images/bod_image1a.jpg" width="171" height="168" id="bod1" class="bod1" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image2a.jpg" width="171" height="168" id="bod2" class="bod2" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image3a.jpg" width="171" height="168" id="bod3" class="bod3" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image4a.jpg" width="169" height="168" id="bod4" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image5a.jpg" width="171" height="168" id="bod5" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image6a.jpg" width="171" height="168" id="bod6" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image7a.jpg" width="171" height="168" id="bod7" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image8a.jpg" width="169" height="168" id="bod8" /></div>

            <div id="boardDirectorsImage"><img src="images/bod_image9a.jpg" width="171" height="168" id="bod9" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image10a.jpg" width="171" height="168" id="bod10" /></div>
            <div id="boardDirectorsImage"><img src="images/bod_image11a.jpg" width="171" height="168" id="bod11" /></div>
            <div id="boardDirectorsImage" style="width:169px;"><img src="images/bod_image11a.jpg" width="169" height="168" id="bod12" /></div>
        </div>

Finally the other script to show the data:

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

$('#bod1').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 1</p>'); 
});

$('#bod2').click(function() {
  $('#bodInfoContain').html('<p class="bodName">NAME 2</p>');
});

Can this be done or am i way in over my head?

回答1:

Use this jQuery and it will work fine.

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

来源：https://stackoverflow.com/questions/27942008/image-transparency-level-fade-on-mouse-over-and-stay-100-on-click