Как анимировать определенный экземпляр класса?

Question

Ниже приведен фрагмент того, над чем я работаю. В основном это будет большая сетка изображений с непрозрачным покрытием, покрывающим их. Я хочу, чтобы каждый конкретный оверлей отображался, когда я наводил изображение div. Я также должен убедиться, что только одно изображение не имеет наложения за раз.

Как мне это сделать?

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

Это то, что я пытался делать ...

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

Answer 1

Z-индекс никогда не будет равен "0px", а г-индекс не является значением пикселя, и вам не нужно использовать z-index в вашем javascript, если вы просто удалите оверлей, анимируя непрозрачность до нуля на наложении.

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