0

我想要一张图片表，当您将鼠标悬停在每张图片上时，它将为其不透明度设置动画。问题是它只会在第一张图像上设置不透明度动画，其余的不会受到影响。

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;
}

我怎样才能让它工作？谢谢你的帮助。

4

2 回答 2

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>
....
于 2013-06-29T01:05:38.180 回答
0

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

话虽如此，如果您希望它适用于每个元素，则需要在您的元素上使用类。

于 2013-06-29T01:07:08.710 回答