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

我想在第三个框中复制我在http://www.rockstargames.com/lanoire/处找到的效果。当将对方的缩略图悬停时变暗。为了实现这一点，在标准的JavaScript我想如下处理onmouseover事件：JQuery缩略图悬停突出显示（隐藏其他缩略图）

打通每个缩略图，但是这是徘徊在一个每个缩略图
迭代引用，改变不透明度值

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

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

来源

2011-07-04 Davide Valdo

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

你的逻辑转换为这样的事情：

$("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/

来源

2011-07-04 22:52:28

这是惊人的，研究这个框架，它是值得的努力。谢谢。 –

@Davide：没问题！玩得开心学习，一定要看看最高评价的问题和答案在这里堆栈溢出一些有用的东西'：）' –

我花了自由编辑你的脚本，添加一个黑色的div div元素包装。这样图像淡入我想要的颜色。 –

您可以使用jQuery mousenter和鼠标离开来implment相同的逻辑

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

第二步：使用jQuery的这一点，并得到你想要的每条记录的详细信息，这得到细节的当前对象，你可以将所有的财产。

然后使用和jQuery的CSS属性的设置属性的

第三步：http://api.jquery.com/css/

来源

2011-07-04 22:39:40 kobe

给每个缩略图类（例如.thumbnail），然后使用jQuery来设置opacity，并应用mouseover和mouseout事件给每个：

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

你可以看到在这个这个工作210。

来源

2011-07-04 22:42:28

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

回答

相关问题