Question

I’m trying to do a simple hover animation using jQuery, but I’m lost somewhere in selecting the right tags. WordPress is not making it easy.

jQuery(document).hover(function() {
    jQuery('img').animate({ opacity: '0.5'});
}, function() {
    jQuery('img').animate({ opacity: '1'});
});

This code works fine, but as you can imagine, it changes the opacity of every single image on the page. Here comes my problem: what I’m supposed to put there instead of ‘document’, to change opacity of only one image? I’ve tried everything by now :P. Here’s my little website I’m working on: http://www.klosinski.net.

Answer 1

Edit – New Answer
To change every image on its own hover event, apply the event to all img tags, and then use this to select that element:

jQuery("img").hover(function() {
    jQuery(this).animate({ opacity: '0.5'});
}, function() {
    jQuery(this).animate({ opacity: '1'});
});

The below answer contains some good info, so I’ll keep it in here.

Semi-irrelevant Answer Below

You are selecting every img tag. You need to come up with a way to uniquely identify the elements you want to change. The most used and most supported method of doing this is using either the class or id of the element. In example, HTML:

<img src="lol.png" class="fadeThese" />

JS:

$("img.fadeThese").fadeOut();

The selector inside the $() works just like a css selector, with a few added features. Some of these additional features are:

• Attribute selection: $("a[href=google.com]"). This will select all a tags with href equal to google.com
• jQuery filters: $("div:nth-child(3)") gets the fourth child of an element
• Selection by value: $("input[value=yes]")

For reference

• jQuery Selectors
• CSS Selectors (stay away from w3fools)