选择正确的元素进行动画处理

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: 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)

Answer 2

just give:

$("#idoftheimage")  

instead of

jQuery('img')

&

<img id='idoftheimage'>

Answer 3

要选择页面上的特定元素，请使用“＃”标记。因此，如果元素的id为“Image1”，则可以使用jQuery('#Image1').animate({ opacity: '0.5'});

Answer 4

If you're used to CSS it's very similar. So as such you could do something like:

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

In this case only images, with a class of myimagetochangeopacity, that are childs of a DIV will get affected.