Question

我试图在第三个框中复制我在http://www.rockstargames.com/lanoire/找到的效果。当相互悬停缩略图时会变暗。为了实现这一点，在标准的javascript中，我将按如下方式处理onMouseOver事件：

获取每个缩略图的引用
遍历每个缩略图但是悬停的缩略图并更改不透明度值

我会通过设置超时来处理onMouseOut事件，之后将重置每个拇指。

我的问题是我对JQuery知之甚少，而且我不知道我的方法是否正确。我宁愿不去编写代码来最终与框架争论。你有什么建议吗？

Answer 1

你的方法是正确的，但我没有看到需要超时（除非你想要一个当然）

你的逻辑转换成这样的东西：

$("img").hover(function () {
    /* Dim everything but this img: */
    $("img").not(this).stop().animate({ opacity: 0.5 });
}, function () {
    /* animate all images back to fully visible. */
    $("img").stop().animate({ opacity: 1.0 });
});

页面加载和鼠标移开后，所有图像都可见。不是悬停图像的图像会变暗。

以下是一个有效的例子：http://jsfiddle.net/SJ7bp/

Answer 2

您可以使用jquery mousenter和mouseleave来实现相同的逻辑

第1步： http://api.jquery.com/mouseenter/

step2：使用jquery这个并获取每条记录所需的详细信息，这将获取当前对象的详细信息，您可以使用所有属性。

然后使用jquery .css属性来设置属性的

第3步 http://api.jquery.com/css/

Answer 3

为每个缩略图指定一个类（例如.thumbnail），然后使用jQuery设置opacity，并将mouseover和mouseout事件应用于每个：

$(".thumbnail").css("opacity", "0.5").mouseover(function() {
     $(this).css("opacity", "1.0"); 
}).mouseout(function() {
     $(this).css("opacity", "0.5");  
});

您可以在此example fiddle中看到这一点。

JQuery缩略图悬停突出显示（隐藏其他缩略图）

3 个答案: