2

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

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

这段代码运行良好，但正如您想象的那样，它改变了页面上每个图像的不透明度。我的问题来了：我应该放什么而不是“文档”来改变只有一张图像的不透明度？我现在已经尝试了一切：P。这是我正在开发的小网站：www.klosinski.net。

4

4 回答 4

3

编辑 - 新答案 要更改其自己的悬停事件中的每个图像，将该事件应用于所有 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]")

以供参考

于 2012-08-10T13:08:16.877 回答
3

只要给：

$("#idoftheimage")

代替

jQuery('img')

&

<img id='idoftheimage'>
于 2012-08-10T13:10:08.007 回答
3

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

于 2012-08-10T13:10:55.630 回答
1

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.

于 2012-08-10T13:12:16.283 回答