title: Problems Creating Dissolve Card Effect with jQuery
body: <p>I'm a jquery novice trying to code a card like animation that dissolves to the back when click and back to the front when clicked again. I tried to do this by overlaying two divs and listening for clicks on the bottom div (essentially clicking through top div). </p>
  
  <p>I was nearly successful using jQuery's fadeTo method. I could get the div on top to fade out, but not fade in again. I think the problem lies in fadeTo messing with my visibility value because now clicking the div only fires the <code>vizValue==visible</code> condition. However, my visibility property does not show up in my console so I can't check it. I appreciate your experienced eyes!</p>
  
  <p><a href="https://i.stack.imgur.com/lVKC6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lVKC6.png" alt="enter image description here"></a>
  So the green div is of class <code>tabReveal</code>. I am clicking thru it to the white div of class <code>tab</code>. </p>
  
  <p>html </p>
  
  <pre><code>    &lt;div class="tab"&gt;
          &lt;div class="tabReveal"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(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");
          })
      }
  
  })
  </code></pre>