Question

我正在尝试使用jQuery做一个简单的悬停动画，但我在选择正确的标签时迷失了方向。 Wordpress并不容易。

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

此代码工作正常，但您可以想象，它会更改页面上每个图像的不透明度。这是我的问题：我应该把它放在那里而不是'文件'，改变一个图像的不透明度？我现在已经尝试了一切：P。这是我正在研究的小网站：www.klosinski.net。

Answer 1

编辑 - 新答案 要更改自己的悬停事件中的每个图像，请将事件应用于所有img标记，然后使用this选择该元素：

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

以下答案包含一些不错的信息，所以我会把它保存在这里。

下面的半无关答案

您正在选择每个img标签。您需要想出一种方法来唯一标识要更改的元素。最常用和最受支持的方法是使用元素的类或id。例如，HTML：

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

JS：

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

$()中的选择器就像css选择器一样，具有一些附加功能。 其中一些附加功能：

属性选择：$("a[href=google.com]")。这将选择href等于google.com
jQuery过滤器：$("div:nth-child(3)")获取元素的第四个子元素
按值选择：$("input[value=yes]")

供参考

jQuery Selectors
CSS Selectors（远离w3fools）

Answer 2

请给：

$("#idoftheimage")

而不是

jQuery('img')

＆安培;

<img id='idoftheimage'>

Answer 3

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

Answer 4

如果你习惯了CSS，那就非常相似了。所以你可以这样做：

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

在这种情况下，只有具有myimagetochangeopacity类的图像才会受到影响。

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

4 个答案: