Jquery - mouse over -> fade in/out // click -> opacity 100% // other click -> opacity 60

Question

Hello,

Iam working on a website with jquery and thumbnails.

When the page is loaded all the thumbnails have to be on 60% of opacity. As soon as you go with your mouse over a thumb it needs to fade to 100%, if you move with your mouse out the thumbnail needs to fade back up on 60% of opacity.

When the user click on a thumbnail it have to stay at 100% of opacity. As soon as the user click on another thumbnail the 'old' thumbnail has to fade back to 60% and the 'new' one has to stay at 100%. (it already has 100% opacity because you go with your mouse over it).

This is the code I have so far:

$(window).bind("load", function() {
$("#mycarousel li").fadeTo(1, 0.6);

$("#mycarousel li").hover(function(){
 $(this).fadeTo(350, 1.0);
 $(this).addClass('Active');
 },function(){
 $("this:not('.Active')").fadeTo(350, 0.6);
});
});

Any help would be appreciated.

Greatings, Bas

Answer 1

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.6,
        fadeTime = 350,
        clickedClass = "selected",
        thumbs = "#mycarousel li";

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