Animation with animate.css with visibility:hidden

Question

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..

 $("#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!");

    }
    );

css

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;
}

html

<div id="navbar" class="hidNav animated"><input type="button" style="right:0px;width:30px;height:30px;" id="btnAlert"></div>
<input type="button" id="btnNav" style="top:100px;width:50px;height:50px">

I made and example in jsfiddle with my problem

Answer 1

You could also accomplish this using just jQuery like so:

 $('#navbar').hide();
 $("#btnNav").click(
    function(){

       $("#navbar").fadeToggle( "slow", "linear" );

    });

    $("#btnAlert").click(
    function(){
        alert("navbar btn clicked!");

    }
    );

I also removed "hidNav" and "showNav" from the CSS and added absolute position to "btnNav"