title: Animation with animate.css with visibility:hidden
body: <p>I'm having a little issue using animate.css... I need to animate a div when it becomes visible with fadeIn (that part is actualy working) and animate with fadeOut when it's visibility becomes hidden but it don't animate, it just vanishes... I tried that with opacity 1 and 0 and it works but with opacity the button inside the div still works and I need it to become hidden like it doesnt exists on page..</p>
  
  <pre><code> $("#btnNav").click(
      function(){
          if($("#navbar").hasClass("hidNav")){
              $("#navbar").removeClass("hidNav");
              $("#navbar").removeClass("fadeOut");
              $("#navbar").addClass("showNav");
              $("#navbar").addClass("fadeIn");
          }else{
              $("#navbar").removeClass("showNav");
              $("#navbar").removeClass("fadeIn");
              $("#navbar").addClass("hidNav");
              $("#navbar").addClass("fadeOut");
          }
  
  
      });
  
      $("#btnAlert").click(
      function(){
          alert("navbar btn clicked!");
  
      }
      );
  </code></pre>
  
  <p>css</p>
  
  <pre><code>body{
      width: 100%;
      height: 100%;
  }
  #navbar{
      width:100%;
      height:50px;
      background-color:red;
      animation-duration: 2s;
  }
  .hidNav{
      /*opacity: 0;*/
      visibility: hidden;
  }
  .showNav{
      /*opacity: 1;*/
      visibility: visible;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="navbar" class="hidNav animated"&gt;&lt;input type="button" style="right:0px;width:30px;height:30px;" id="btnAlert"&gt;&lt;/div&gt;
  &lt;input type="button" id="btnNav" style="top:100px;width:50px;height:50px"&gt;
  </code></pre>
  
  <p>I made and example in <a href="https://jsfiddle.net/andradegbz/qgvye3xs/" rel="nofollow noreferrer">jsfiddle</a> with my problem</p>