Jquery - 鼠標懸停 - >淡入/淡出//單擊 - >不透明度100％//其他點擊 - >不透明度60

Question

Iam在使用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); 
}); 
}); 

任何幫助，將不勝感激。

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