Jquery - souris sur -> fade in / out // cliquez sur -> 100% d'opacité // autre clic -> 60 opacité

Question

Iam travaillant sur un site Web avec jquery et vignettes.

Lorsque la page est chargée de toutes les vignettes doivent être sur 60% d'opacité. Dès que vous allez avec votre souris sur le pouce, il doit disparaître à 100%, si vous vous déplacez avec votre souris sur la vignette doit aussi estomper sur 60% d'opacité.

Lorsque l'utilisateur clique sur une vignette-il rester à 100% d'opacité. Dès que l'utilisateur clique sur une autre vignette, l'miniature « ancien » doit disparaître de nouveau à 60% et la « nouvelle » on doit rester à 100%. (Il a déjà une opacité de 100% parce que vous allez avec votre souris dessus).

Ceci est le code que j'ai à ce jour:

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

Toute aide serait appréciée.

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