JQuery - ratón sobre -> fundido de entrada / salida // clic -> opacidad 100% // otro clic -> 60 opacidad

Question

Iam trabajando en un sitio web con jQuery y miniaturas.

Cuando se carga la página todas las miniaturas tienen que estar en el 60% de opacidad. Tan pronto como vas con el puntero del ratón sobre un pulgar que necesita a desvanecerse al 100%, si se mueve con el ratón a cabo la miniatura tiene que desaparecer copia de seguridad en un 60% de opacidad.

Cuando el usuario haga clic en la miniatura que tiene que permanecer en el 100% de opacidad. Tan pronto como el usuario haga clic en otra de imágenes en miniatura de la 'vieja' imagen en miniatura va a desaparecer de nuevo a 60% y la 'nueva' uno tiene que permanecer en el 100%. (Que ya cuenta con 100% de opacidad debido a que vaya con el puntero del ratón sobre él).

Este es el código que tengo hasta ahora:

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

Cualquier ayuda sería apreciada.

Greatings, Bajo

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