Jquery 具有可见性的animate.css动画：隐藏

我在使用animate.css时遇到了一个小问题。。。我需要动画一个div时，它变得可见与fadeIn（该部分实际上是工作）和动画与淡出时，它的可见性变得隐藏，但它没有动画，它只是消失。。。我尝试了不透明度1和0，它的作品，但不透明度的按钮内的div仍然工作，我需要它成为隐藏，就像它不存在于网页上

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

html

---

我提出并举例说明了我的问题

这可以通过css转换和不透明度来实现。（不是动画，虽然我不是说动画不可能）

您需要添加

transition:opacity 2s linear编码到类样式，并使用不透明度显示和隐藏div


$（“#btnNav”）。单击(
函数（）{
if（$（“#navbar”）.hasClass（“hidNav”））{
$（“#navbar”）.removeClass（“hidNav”）；
$（“#navbar”）.removeClass（“淡出”）；
$（“#导航栏”）.addClass（“显示导航”）；
$（“#导航栏”）.addClass（“fadeIn”）；
}否则{
$（“#navbar”）.removeClass（“showNav”）；
$（“#navbar”）.removeClass（“fadeIn”）；
$（“#导航栏”）.addClass（“hidNav”）；
$（“#导航栏”）.addClass（“淡出”）；
}
});
$（“#btnAlert”）。单击(
函数（）{
警报（“导航栏btn已点击！”）；
}
);
正文{
宽度：100%；
身高：100%；
}
#导航栏{
宽度：100%；
高度：50px；
背景色：红色；
过渡：线性；
}
希德纳夫先生{
不透明度：0；
}
.showNav{
不透明度：1；
}
您也可以使用jQuery来实现这一点，如下所示：

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

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

    });

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

    }
    );

我还从CSS中删除了“hidNav”和“showNav”，并在“btnNav”中添加了绝对位置

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

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

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

    });

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

    }
    );