title: Start with div hidden then toggle using Animate.css fadeIn and fadeOut
body: <p>I am trying to make a div start out hidden using display: none and then use jQuery to toggle fadeIn animation from <a href="https://daneden.github.io/animate.css/" rel="nofollow noreferrer">Animation.css</a> from the click of a button. </p>
  
  <p>But when i attempt to toggle the animation, it works but hiding it it doesn't play the fadeout animation.</p>
  
  <p>here is a working <a href="https://codepen.io/wilprim/pen/vabVzv" rel="nofollow noreferrer">example</a>:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="window animated"&gt;&lt;/div&gt;
  
  &lt;button style="margin: 100px;"&gt;Toggle Fade Window&lt;/button&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.window{
    background: blue;
    width: 200px;
    height: 200px;
    margin: 20px;
    display: none;
  }
  </code></pre>
  
  <p><strong>JS:</strong> </p>
  
  <pre><code>$(function() {
    $("button").click(function() {
      $(".window").toggleClass("fadeIn");
    })
  })
  </code></pre>
  
  <p>Thanks!</p>