jquery - 使用 jQuery 创建溶解卡片效果的问题

Question

我是一个 jquery 新手，试图编写一个卡片式的动画，点击时消失在后面，再次点击时又回到前面。我试图通过叠加两个 div 并监听底部 div 上的点击(实际上是点击顶部 div)来做到这一点。

我几乎成功地使用了 jQuery 的 fadeTo 方法。我可以让顶部的 div 淡出，但不会再次淡入。我认为问题在于 fadeTo 弄乱了我的可见性值，因为现在单击 div 只会触发 vizValue==visible 条件。但是，我的可见性属性没有显示在我的控制台中，所以我无法检查它。我很欣赏你有经验的眼睛!

所以绿色的 div 属于 tabReveal 类。我正在点击它进入 tab 类的白色 div。

html

    <div class="tab">
        <div class="tabReveal"></div>
    </div>

CSS

.tab{
    width:25%;
    height:25%;
    background-color:white;
    position:relative;
    display:inline-block;
    pointer-events:auto;    
}

.tabReveal{
    width:100%;
    height:100%;
    background-color: green;
    position: absolute;
    top:0px;
    left:0px;
    pointer-events:none;
}

js

$(document).on("click",".tab",function(){
    var vizValue = $(this).children().css("visibility");
    if (vizValue=="visible"){
        console.log("invisible cloak");
        $(this).children().fadeTo(500,0,function(){
            $(this).children().css("visibility","hidden");
            $(this).children().css("pointer-events","none");//need to reset this
        });
    }
    else {
        console.log("visible cloak");
        $(this).children().fadeTo(500,100,function(){
            $(this).children().css("visibility","visible");
        })
    }

})

Answer 1

我应该使用不透明度而不是可见性:

$(document).on("click",".tab",function(){
    var vizValue = $(this).children().css("opacity");
    if (vizValue==1){
        console.log("invisible cloak");
        $(this).children().fadeTo(500,0,function(){});
    }
    else {
        console.log("visible cloak");
        $(this).children().fadeTo(500,1,function(){});
    }

})