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);
    }
});

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

1 个答案: