Question

我在使用animate.css时遇到了一些问题......我需要在使用fadeIn（该部分实际工作）变为可见时为div设置动画，并在其可见性变为fadeOut时设置动画隐藏，但它没有动画，它只是消失了...我尝试了不透明度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

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

我在问题

的jsfiddle中制作了示例

Answer 1

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

您需要将transition:opacity 2s linear;添加到班级样式中，并使用不透明度来显示和隐藏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!");
            
        }
        );

body{
    width: 100%;
    height: 100%;
}
#navbar{
    width:100%;
    height:50px;
    background-color:red;
    transition:opacity 2s linear;
}
.hidNav{
    opacity: 0;
}
.showNav{
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<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">

Answer 2

您也可以使用jQuery完成此操作：

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

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

    });

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

    }
    );

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

动画与animate.css，可见性：隐藏

2 个答案: