使用jQuery创建解散卡片效果的问题

Question

我是一个jquery新手试图编写像动画一样的卡片，当点击时会向后方溶解，当再次点击时会回到正面。我尝试通过覆盖两个div并听取底部div的点击（基本上点击顶部div）来做到这一点。

我使用jQuery的fadeTo方法几乎成功了。我可以让顶部的div消失，但不会再次消失。我认为问题在于淡化我的可见性值，因为现在单击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(){});
    }

})