Уровень прозрачности изображения исчезает при наведении мыши и остается на 100% при клике

Question

Я работаю с кучей изображений в div, когда страница загружена, все эскизы имеют 30% непрозрачности. Как только вы наводите указатель мыши на большой палец, он исчезает до 100%, а если вы двигаете мышью из миниатюры, он снова исчезает с 30% непрозрачности. Этот бит работает.

Теперь, когда пользователь нажимает на миниатюру, он должен оставаться с непрозрачностью 100%. Как только пользователь нажимает на другую миниатюру, "старая" миниатюра должна исчезнуть до 30%, а "новая" должна остаться на 100%. Проблема заключается в том, что при нажатии на новое изображение старое изображение не возвращается к 30%, а остается на 100%.

Код кредита: ПатрикАкерстранд

Может кто-нибудь помочь, пожалуйста? Код ниже:

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

Изображения, перечисленные в 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>

Наконец, другой скрипт для отображения данных:

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

Это может быть сделано, или я над головой?

Answer 1

Используйте этот jQuery, и он будет работать нормально.

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