Jquery - 마우스 오버 페이드 인/아웃 // 클릭 -> 불투명도 100 % // 기타 클릭 -> 불투명도 60

Question

jamery와 미리보기 이미지가있는 웹 사이트에서 작업 중입니다.

페이지가로드되면 모든 축소판이 불투명도의 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); 
}); 
}); 

:

이

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

Greatings, 바스

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