クラスの特定のインスタンスをアニメーション化する方法は？

Question

以下は、私が取り組んでいることのスニペットです。基本的には、それらを覆う不透明なオーバーレイを持つ大きな画像のグリッドになります。 divの画像をホバリングすると、それぞれのオーバーレイがアニメーション化されます。私はまた、一度に1つのイメージだけがオーバーレイを持っていないことを確認する必要があります。

これを行うにはどうすればよいですか？

<div id="cast-wrap"> 
    <div id="img-wrap"> 
    <div class="char"><div class="overlay"></div><img style="z-index: 99999999;" src="img/person1.jpg"/></div> 
    <div class="char"><div class="overlay"></div><img src="img/person2.jpg"/></div> 
    <div class="char"><div class="overlay"></div><img src="img/person3.jpg"/></div> 
</div> 

これは、Zインデックスがピクセル値ではありませんとのz-indexが、 "0PX" に等しくなることはありません...私はやってみました何

$(".char").hover(
    if($("this.char img").css("z-index") == "0px"){ 
    $('this.overlay').animate({"opacity": 0}); 
    $('this.char img').animate({zIndex: 999999}, 2000) 
    } 
}); 

Answer 1

ですオーバーレイで不透明度をゼロにアニメーション化してオーバーレイを削除するだけでは、JavaScriptでZ-インデックスを使用する必要はありません。

$(".char").on({ 
    mouseenter: function() { 
     $('.overlay', this).animate({"opacity": 0}, 1000); 
    }, 
    mouseleave: function() { 
     $('.overlay', this).animate({"opacity": 1}, 1000); 
    } 
});