如何动画一个类的特定实例？

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-index将永远不等于 “0像素”，因为z-index的是不是一个像素值，你也不应该在你的javascript中使用z-index，如果你通过将叠加层上的不透明度设置为零来删除叠加层。

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