鼠标hover时图像透明度级别淡化，单击时保持100％

我正在使用div中的一堆图像，当页面加载时，所有缩略图都是不透明度的30％。 一旦你用鼠标滑过拇指，它就会逐渐衰减至100％，如果你用鼠标移动缩略图，它会在30％的不透明度上消失。 这个位有效。

现在，当用户点击缩略图时，它必须保持100％不透明度。 用户点击另一个缩略图后，“旧”缩略图必须逐渐淡出30％，而“新”缩略图必须保持100％。 这个位是问题，当我点击一个新图像时，旧图像不会恢复到30％但保持100％

代码信用：PatrikAkerstrand

有人可以帮忙吗？ 代码如下：

$(window).bind("load", function() { var activeOpacity = 1.0, inactiveOpacity = 0.3, fadeTime = 350, clickedClass = "selected", thumbs = "#boardDirectorsImage img"; $(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); }); }); 

HTML中列出的图片：

最后用另一个脚本来显示数据：

 $( document ).ready(function() { $('#bod1').click(); }); $('#bod1').click(function() { $('#bodInfoContain').html('
NAME 1
'); }); $('#bod2').click(function() { $('#bodInfoContain').html('
NAME 2
'); }); 

这可以做到还是我在脑海里？

Answer 1

使用这个jQuery，它会工作正常。

 $(window).bind("load", function() { var activeOpacity = 1.0, inactiveOpacity = 0.3, fadeTime = 350, clickedClass = "selected", thumbs = "#boardDirectorsImage img"; $(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 $(thumbs).removeClass(clickedClass).fadeTo(fadeTime, inactiveOpacity); $(this).addClass(clickedClass).fadeTo(fadeTime, activeOpacity); }); });