1

以下は、私が取り組んでいることのスニペットです。基本的には、不透明なオーバーレイで覆われた画像の大きなグリッドになります。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>

これは私がやってみた...

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

1 に答える 1

1

z-index はピクセル値ではないため、z-index が「0px」になることはありません。また、オーバーレイの不透明度をゼロにアニメートしてオーバーレイを削除するだけの場合は、JavaScript で z-index を使用する必要もありません。 .

$(".char").on({
    mouseenter: function() {
        $('.overlay', this).animate({"opacity": 0}, 1000);
    },
    mouseleave: function() {
        $('.overlay', this).animate({"opacity": 1}, 1000);
    }
});
于 2012-04-29T01:27:51.757 に答える