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锁定多个tumbnails。

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

Fadein Hover，淡出到原始状态或onclick停留在悬停状态

2 个答案: