2

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

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

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

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

4

3 回答 3

2

您的方法是正确的，但是我认为不需要超时（除非您当然想要）

你的逻辑翻译成这样的：

$("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-04T22:52:28.850 回答
0

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

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

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

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

step3 http://api.jquery.com/css/

于 2011-07-04T22:39:40.620 回答
0

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

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

你可以在这个例子 fiddle中看到这个工作。

于 2011-07-04T22:42:28.777 回答