淡入悬停并淡出至原始状态或 onclick 保持悬停状态

Question

你好，我是 jQuery 和 Javascript 的新手！

我要做的是：

带有 jquery 和缩略图的网站。

加载页面时，所有缩略图的不透明度都必须为 60%。一旦您将鼠标放在拇指上，它就需要淡出到 100%，如果您将鼠标移出，缩略图需要淡出到 60% 的不透明度。

当用户单击缩略图时，它必须保持 100% 的不透明度。一旦用户单击另一个缩略图，“旧”缩略图就必须淡回到 60%，而“新”缩略图必须保持 100%。 （它已经具有 100% 的不透明度，因为您将鼠标放在它上面）。

Answer 1

$(document).ready(function(){
    $("#image").mouseover(function (){
       $(this).fadeTo("slow", 1)
    });

   $("#image").mouseout(function (){
       $(this).fadeTo("slow", 0.6);
   });
});

看看 jsFiddle 我已经设置了一个测试来展示它是如何工作的

Answer 2

给你一个演示：

http://jsfiddle.net/sg3s/UtU8G/

悬停淡入淡出对于动画，如果锁定，则不要悬停，单击时淡出其他动画并锁定此动画。

编辑

作为奖励，这里有一个版本，您可以使用 ctrl 锁定多个缩略图。

http://jsfiddle.net/sg3s/UtU8G/6/