Animation mit animate.css mit Sichtbarkeit: versteckt

Question

Ich habe ein kleines Problem mit animate.css ... Ich muss ein div animieren, wenn es mit fadeIn sichtbar wird (dieser Teil arbeitet tatsächlich) und mit fadeOut wann animieren es ist Sichtbarkeit wird versteckt, aber es wird nicht animiert, es verschwindet einfach ... Ich habe das mit Deckkraft 1 und 0 versucht und es funktioniert, aber mit Undurchsichtigkeit funktioniert der Knopf innerhalb des div immer noch und ich brauche es um versteckt zu werden wie es nicht existiert Seite ..

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

ich gemacht und beispielsweise in jsfiddle mit meinem Problem kann

Answer 1

Sie können auch diese mit nur jQuery wie so erreichen:

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

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

    }); 

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

    } 
    ); 

ich auch entfernt "hidNav" und "showNav" von der CSS und hinzugefügt absolute Position " btnNav "

Answer 2

Diese mit CSS-Übergängen und Opazität erreicht werden. (keine Animationen, obwohl ich nicht sage, dass es mit Animationen nicht möglich ist).

Sie müssen den Klassenstilen transition:opacity 2s linear; hinzufügen und die Opazität verwenden, um das div anzuzeigen und auszublenden.

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