選擇正確的元素來動畫

我想要做一個簡單的懸停動畫使用jQuery，但我迷失在某處選擇正確的標籤。 WordPress的並不容易。選擇正確的元素來動畫

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

此代碼工作正常，但你可以想像，它改變了每一個圖像的不透明度的頁面上。這就是我的問題：我應該把它放在那裏而不是'文檔'，以改變只有一個圖像的不透明度？我現在已經試過了一切：P。這是我正在處理的我的小網站：www.klosinski.net。

來源

2012-08-10 Soviet

你想要動畫的圖像是？或者你只是想動畫懸停的圖像？ – Zhihao 2012-08-10 13:08:30

是的，我只想動畫只有徘徊的圖像。看看這個網站：我正在考慮上面帖子的圖片。 – Soviet 2012-08-10 13:13:25

編輯 - 新建答案 要改變每幅圖像自身懸停事件，該事件適用於所有的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）

來源

2012-08-10 13:08:16 Austin

好答案:)。 – 2012-08-10 13:20:58

很好的答案，但它不適用於我的情況......在圖像懸停時沒有任何事情發生。奇怪。 – Soviet 2012-08-10 13:33:52

[Works fine here]（http://jsfiddle.net/Ajp427/dvjZe/） – Austin 2012-08-10 13:38:04

就給：中

$("#idoftheimage")

代替

jQuery('img')

<img id='idoftheimage'>

來源

2012-08-10 13:10:08 Jignesh

選擇頁面上的特定元素使用「＃」標籤。所以如果你的元素的ID是「Image1」，你可以使用jQuery('#Image1').animate({ opacity: '0.5'});

來源

2012-08-10 13:10:55

如果你習慣了CSS，它非常相似。所以因此你可以這樣做：

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

在這種情況下，只有圖像，帶班myimagetochangeopacity的，這是一個DIV的孩子的將也會受到影響。

來源

2012-08-10 13:12:16

選擇正確的元素來動畫

回答

相關問題