Jquery – 鼠标hover – >淡入/淡出//单击 – >不透明度100％//其他单击 – >不透明度60

我在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，Bas

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