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

0

を使用しているため、最初の画像でのみ機能しますid。IDは一意であることを意図しており、jQueryはそれを知っています。したがって、ID をセレクターとして使用する場合、どちらがネイティブの JavaScript セレクターであり、 1 つの要素のみdocument.getElementById(yourId)を返すため最速のセレクターでもあります。

そうは言っても、すべての要素で機能させたい場合は、要素でクラスを使用する必要があります。

于 2013-06-29T01:07:08.710 に答える