title: JS toggle with animation (animate.css)?
body: <p>I'm trying to achieve a slide-in menu with a button toggle (toggleClass). I am not sure though how I can add the animation. I tried to let it slide in from the top (animation name in a.css is <code>slideInDown</code>)</p>
  
  <p>This is my <a href="http://codepen.io/pirrera/pen/CELsv" rel="nofollow noreferrer">demo</a>, so you can see what I have.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- ========== Navigation ========== --&gt;
  &lt;a type="button" class="btn btn-blue nav-btn"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;div class="navbar navbar-fixed-top closed" role="navigation" id="top-header"&gt;
      &lt;div class="container"&gt;
        &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;&lt;a class="scroll" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#works"&gt;Works&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#timeline"&gt;Timeline&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="scroll" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- ========== /Navigation ========== --&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// Open/close menu when button is clicked
  $(".nav-btn").click(function () {
    $(".navbar").toggleClass('closed open');
    return true;
  });
  </code></pre>
  
  <p>CSS Snippet</p>
  
  <pre><code>.open {
      display:block;
      visibility:visible;  
  }
  
  .closed {
      display:none;
      visibility:hidden;
  }
  </code></pre>
  
  <p>(This is <a href="https://github.com/daneden/animate.css" rel="nofollow noreferrer">animate.css</a> which I'm using in general for the site)</p>
  
  <p><strong>EDIT</strong>: based on the answer from @stewbydoo (thank you so much!) I came up with:</p>
  
  <pre><code>// Open/close menu when button is clicked
  $(".nav-btn").click(function () {
    if($(".navbar").hasClass("closed")){
      $(".navbar").removeClass("closed");
      $(".navbar").addClass("animated slideInDown");
    }else{
      $(".navbar").removeClass("animated slideInDown");
      $(".navbar").addClass("closed");
    }
  });
  </code></pre>
  
  <p>Which looks a little messy, but is sliding down just fine. Now I need to figure out how to let it slide up (nicely) again :)</p>