Question

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 thumbnail 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?

Answer 1

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/