Adding classes to an overlay

So I have a hamburger icon that transitions to an 'x' on the click of a button. When the button is clicked, an overlay with a nav appears. I'm trying to dynamically add some css transitions to the nav when it appears on the overlay. I want it to fade in and fade out with the overlay. At the moment I've got it so that the first time I click on the hamburger icon everything works properly. The overlay and nav fade in. Then when I click on the 'x' the overlay and nav fade out as they should. But after that, when I click on the hamburger icon, the overlay fades in as it should, but the nav fades out instead of fades in. Here's the jQuery code, the dynamic adding are the lines $('.wrap-nav').addClass('animated fadeInDown'); and $('.wrap-nav').addClass('animated fadeOutDown');

$(document).ready(function(){
    $('#nav-icon1').click(function(){
        $(this).toggleClass('open');
    });
});

$(document).ready(function(){

 var open = false;
 $('#nav-icon1').on('click',function(){
 if(open == false){
 $('.overlay').fadeIn(200);
$('.wrap-nav').addClass('animated fadeInDown');

 open = true;
 } else {
 $('.overlay').fadeOut(200)
 $('.wrap-nav').addClass('animated fadeOutDown');
 open = false;
 }
 });
 $('.overlay').on('click', function(){
 $('.overlay, .btn-close').fadeOut(200);
 $('nav ul li, .btn-open').fadeIn(200);
 open = false;
 });
 $('.wrap').on('click', function(){
 return false;
 });
 })