jQuery- 마우스 오버 -> fade in/out // 클릭 -> 불투명도 100% // 기타 클릭 -> 불투명도 60

Question

jQuery 및 썸네일이있는 웹 사이트에서 작업합니다.

페이지가로드되면 모든 썸네일은 불투명도의 60%에 있어야합니다. 엄지 손가락 위로 마우스를 사용하자마자 100%로 사라져야합니다. 마우스와 함께 움직이면 썸네일이 불투명도의 60%에서 다시 등장해야합니다.

사용자가 썸네일을 클릭하면 100%의 불투명도를 유지해야합니다. 사용자가 다른 썸네일을 클릭하자마자 '오래된'썸네일은 60%로 다시 사라져야하며 '새'는 100%를 유지해야합니다. (마우스 위로 마우스와 함께 가기 때문에 이미 100% 불투명도가 있습니다).

이것은 내가 지금까지 가지고있는 코드입니다.

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

모든 도움이 감사하겠습니다.

그레이 딩스, 바스

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