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。原因是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>
....

Answer 2

它仅适用于第一张图片，因为您使用的是id。 Id应该是独一无二的，jQuery知道这一点。因此，当使用id作为选择器时，它将执行document.getElementById(yourId)，这是一个原生的javascript选择器，也是最快的，因为它只返回一个元素。

话虽这么说，如果你希望它对每个元素都有用，你需要在元素上使用class。

jquery animate opacity无法在表中工作

2 个答案: