JS toggle with animation (animate.css)?

Question

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 slideInDown )

This is my demo , so you can see what I have.

HTML

<!-- ========== Navigation ========== -->
<a type="button" class="btn btn-blue nav-btn"><i class="fa fa-bars"></i></a>
<div class="navbar navbar-fixed-top closed" role="navigation" id="top-header">
    <div class="container">
      <ul class="nav navbar-nav">
                <li class="active"><a class="scroll" href="#home">Home</a></li>
                <li><a class="scroll" href="#services">Services</a></li>
                <li><a class="scroll" href="#works">Works</a></li>
                <li><a class="scroll" href="#about">About</a></li>
                <li><a class="scroll" href="#timeline">Timeline</a></li>
                <li><a class="scroll" href="#blog">Blog</a></li>
                <li><a class="scroll" href="#contact">Contact</a></li>
            </ul>

    </div>
</div>
<!-- ========== /Navigation ========== -->

JS

// Open/close menu when button is clicked
$(".nav-btn").click(function () {
  $(".navbar").toggleClass('closed open');
  return true;
});

CSS Snippet

.open {
    display:block;
    visibility:visible;  
}

.closed {
    display:none;
    visibility:hidden;
}

(This is animate.css which I'm using in general for the site)

EDIT : based on the answer from @stewbydoo (thank you so much!) I came up with:

// 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");
  }
});

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 :)

Answer 1

Alright so I know you want to use animate.css for this. Fine by me but below is my proposed solution. Its about 10 lines of JS and minus 5 lines of CSS. Either way here it is. Instead of toggling between CSS classes. We can just use jQuery animate function and manipulate the CSS left property.

JS

$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").animate({
      top: '0px'
    }, 1000);
  }else{
    $(".navbar").animate({
      top: '-100px'
    }, 1000);
    $(".navbar").addClass("closed");
  }
});

CSS

.navbar {
    display: block;
    min-height: 100px;
    border: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    position: fixed;
    top: -100px;
}

/* Comment this part out or just delete it. 
.closed {
    display:none;
    visibility:hidden;
}*/

All I am doing is adding a class to the markup but the class actually holds no CSS significance. I commented out your closed class as it is not necessary when doing it this way. Also I added position and set the top position to -100px to hide the bar as the navbars min-height is 100px .

All I use the class for is for the if statement to check if it is there so we can easily open and close the menu. Here is a link to the codepen . Hope this helps!