javascript - 如何为类的特定实例设置动画？

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 永远不会等于“0px”，因为 z-index 不是像素值，如果您只是通过将叠加层上的不透明度设置为零来删除叠加层，则您也不需要在 javascript 中使用 z-index .

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