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> 
....