jquery animate opacity not in table

Question

我想要一張圖像表，當您將鼠標懸停在每張圖像上時，它會爲其不透明度設置動畫。問題在於它只會增加FIRST圖像的不透明度，其餘不會受到影響。

HTML：

<table id="pictures" align="center"> 

<tr> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
</tr> 

<tr> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
</tr> 

<tr> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
<td><img id="pics" src="img/post/shy_artwork.jpg"></img></td> 
</tr> 

</table> 

的jQuery：

$("#pics").hover(function() { 
    $(this).stop().animate({opacity : 1, border : '17px rgba(255, 255, 255, 0.2) solid'}, 300); 
}, function() { 
    $(this).stop().animate({opacity : 0.85, border : '17px rgba(255, 255, 255, 0) solid'}, 300); 
}); 

CSS：

img#pics 
{ 
height:150px; 
width:150px; 
opacity:0.85; 
border:17px rgba(255, 255, 255, 0) solid; 
} 

我怎樣才能得到這個工作？謝謝你的幫助。

Answer 1

它只適用於第一張圖片，因爲您使用的是id's。 Id是唯一的，jQuery知道這一點。所以當使用id作爲選擇器時，它會執行document.getElementById(yourId)這是一個原生javascript選擇器，也是最快的一個，因爲它只返回只有一個元素。

這就是說，你需要在你的元素上使用類，如果你想讓它爲每個元素工作。

Answer 2

你需要使用類 - 你不能使用多個這樣的ID。原因在於ID是獨一無二的......所以一旦找到第一個，它就不需要尋找更多的東西。

試試這個：http://jsfiddle.net/XZe8L/

我改變了形象和不透明度級別所以這是比較明顯的。

<table id="pictures" align="center"> 

<tr> 
<td><img class="pics" src="http://simpsonsmania.wikispaces.com/file/view/BartSimpsonAni.gif/35178335/BartSimpsonAni.gif"></img></td> 
<td><img class="pics" src="http://simpsonsmania.wikispaces.com/file/view/BartSimpsonAni.gif/35178335/BartSimpsonAni.gif"></img></td> 
....