2

jQuery を使用して単純なホバー アニメーションを実行しようとしていますが、適切なタグを選択する際にどこかで迷っています。Wordpressはそれを簡単にしていません。

jQuery(document).hover(function() {
    jQuery('img').animate({ opacity: '0.5'});
}, function() {
    jQuery('img').animate({ opacity: '1'});
});

このコードは問題なく動作しますが、ご想像のとおり、ページ上のすべての画像の不透明度が変更されます。ここに私の問題があります:1つの画像だけの不透明度を変更するには、「ドキュメント」の代わりに何を入れるべきですか? 私は今までにすべてを試しました:P. ここに私が取り組んでいる私の小さなウェブサイトがあります: www.klosinski.net .

4

4 に答える 4

3

編集 - 新しい回答 独自のホバー イベントですべての画像を変更するには、イベントをすべての img タグに適用し、 を使用thisしてその要素を選択します。

jQuery("img").hover(function() {
    jQuery(this).animate({ opacity: '0.5'});
}, function() {
    jQuery(this).animate({ opacity: '1'});
});

以下の回答にはいくつかの良い情報が含まれているので、ここに残しておきます。

以下の半無関係な回答

すべての img タグを選択しています。変更したい要素を一意に識別する方法を考え出す必要があります。これを行うために最も使用され、最もサポートされている方法は、要素のクラスまたは ID を使用することです。HTML の例:

<img src="lol.png" class="fadeThese" />

JS:

$("img.fadeThese").fadeOut();

内部のセレクター$()は、css セレクターと同じように機能しますが、いくつかの機能が追加されています。これらの追加機能の一部は次のとおりです。

  • 属性の選択: $("a[href=google.com]")。これにより、href が google.com に等しいすべてのタグが選択されます。
  • jQuery フィルター:$("div:nth-child(3)")要素の 4 番目の子を取得します
  • 値による選択:$("input[value=yes]")

参考のため

于 2012-08-10T13:08:16.877 に答える
3

ただ与える：

$("#idoftheimage")

それ以外の

jQuery('img')

&

<img id='idoftheimage'>
于 2012-08-10T13:10:08.007 に答える
3

ページ上の特定の要素を選択するには、「#」タグを使用します。要素の ID が「Image1」の場合は、 jQuery('#Image1').animate({ opacity: '0.5'});

于 2012-08-10T13:10:55.630 に答える
1

CSS に慣れている場合は、非常に似ています。したがって、次のようなことができます。

jQuery(div img.myimagetochangeopacity).hover(function() {
jQuery('img').animate({ opacity: '0.5'});
}, function() {
     jQuery('div img.myimagetochangeopacity').animate({ opacity: '1'});
});

この場合、myimagetochangeopacity のクラスを持つ、DIV の子である画像のみが影響を受けます。

于 2012-08-10T13:12:16.283 に答える