visibility：hiddenを持つanimate.cssを使用したアニメーション

Question

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

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

私は私の問題

Answer 1

またそうのようなだけのjQueryを使ってこれを実現できます。私も、「CSSから "hidNav" と "showNav" を削除し、に絶対位置を追加

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

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

    }); 

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

    } 
    ); 

btnNav "

Answer 2

これは、CSSのトランジションと不透明度を使用して達成することができるとjsfiddleで行われ、例。 （アニメーションではありませんが、アニメーションでは不可能ではありません）。

クラススタイルに​​3210を追加し、不透明度を使用して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">