JQuery thumbnail hover highlighting (hiding other thumbnails)

I am trying to replicate the effect I found at http://www.rockstargames.com/lanoire/ in the third box. When hovering a thumbnail each other is darkened. To implement this, in standard javascript I would handle the onMouseOver event as follows:

• Get references to each thumbnail
• Iterate through each thumbna开发者_StackOverflow社区il but the one that was hovered and change the opacity value

And I would handle the onMouseOut event by setting a timeout after which every thumb would be resetted.

My problem is that I have little knowledge of JQuery, and I don't know if my approach is correct. I'd rather not jump into writing code to end up arguing with the framework. Do you have any suggestions?

Your approach is correct, however I don't see the need for a timeout (unless you wanted one of course)

Your logic translates into something like this:

$("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 });
});

All images are visible upon page load and mouse out. Images that aren't the hovered images are dimmed out.

Here's a working example: http://jsfiddle.net/SJ7bp/

You can use jquery mousenter and mouseleave to implment the same logic

step1: http://api.jquery.com/mouseenter/

step2: Use jquery's this and get the details you want for each record, this gets the details of the current object and you can all the property's.

Then use , jquery .css property's to set the property's

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

Give each thumbnail a class (for example .thumbnail), then use jQuery to set the opacity, and apply a mouseover and mouseout event to each:

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

You can see this working in this example fiddle.