複数の画像要素がすべてJqueryに配置されているとフェードします。

Question

同じIDを持つページ上の1つの要素にフェードを適用する際に問題が発生します。

まず、画像を60％までフェードアウトし、ホバー上で画像を100％にしたいと思います。この部分は機能しますが、効果はページのすべての要素に適用されます。

// Fading images 
$(document).ready(function(){ 

$('.mainArticle img').fadeTo('slow', 0.6); 

$('.mainArticle img, .articleContainer').hover(function(){ 

    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 1.0); 
},function(){ 
    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 0.6); 
}); 
}); 

また、これが可能な限り互換性があるようにしようとしている場合は、これを行うことができます。

は、あなたが再び同じ要素をfind() INGのしている

乾杯、

トム

Answer 1

、君たちは助けることができる願っています。

$('.mainArticle img, .articleContainer').hover(function(){ 
    $(this).stop(true,true).fadeTo("slow", 1.0); 
},function(){ 
    $(this).stop(true,true).fadeTo("slow", 0.6); 
}); 

はしかし、私は（私はあなたがやろうとしているかを理解思うし、あなたのHTMLに応じて、あなたがHTMLを投稿することができれば、それは：あなたは自分のホバーハンドラのためにこれを使用できるように$(this)は、ホバー要素であり、 jsFiddle

：フェードインする1つの画像だけでは

$(function(){ 
    $('.mainArticle img').fadeTo('slow', 0.6); 

    $('.articleContainer').hover(function(){ 
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 1.0); 
    },function(){ 
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 0.6); 
    }); 
}); 

---

：）たくさん容易になるだろう、あなたはおそらくこのような何かにそれを変更したいと思いますフェードする複数の画像を使用する場合：jsFiddle

Answer 2

$（this）.find（ '。mainArticle img、.articleContainer'）の代わりに$（this）を使用するのはどうですか？

セレクタに一致するすべての要素を選択していますが、既にホバリングしているので、$（this）を使用してそこの変更を実行できます。