HowTo: Erster Klick-Animation 1, zweiter Klick Animation 2

Question

Ich bin über ein mobiles Burger-Menü zu erstellen, die wie folgt beseelt:

1) Klicken Sie auf 1 auf Burger-Menü: Menü öffnen Animation ... nav Links Fade-in letzten
2) Klicken Sie auf 2 Burger-Menü: nav Links Fade-out erste ... Menü schließt Animation

ich mit jQuery bin animieren:

/* mobile menu fx */ 
$(document).ready(function(){ 

    $('#nav-icon4').click(function(){ 
     $(this).toggleClass('open'); 
     $('#mobile-menu').toggleClass('open'); 
     $('#mobile-menu-elements').toggleClass('open'); 
     $('#mobile-menu-blurredBg').toggleClass('open'); 
     $('#mobile-menu-elements-ul').toggleClass('open'); 
    }); 

}); 

Wie kann ich eine andere Klasse für den zweiten Klick einstellen (Menü schließen)?

Answer 1

Wenn Sie es in der JS-Seite tun wollen, warum nicht Sie versuchen, eine Zählvariable hinzufügen möchten, sehen, ob es funktioniert:

/* mobile menu fx */ 
$(document).ready(function(){ 

    var count = 0; 

    $('#nav-icon4').click(function(){ 
     if(count == 0){ 
      // do something in the first click; 
      count++; 
     } else{ 
      // do something in the second click; 
      count=0;; 
     } 
    // Dont know which one goes in the first or in the second click 
    $(this).toggleClass('open'); 
    $('#mobile-menu').toggleClass('open'); 
    $('#mobile-menu-elements').toggleClass('open'); 
    $('#mobile-menu-blurredBg').toggleClass('open'); 
    $('#mobile-menu-elements-ul').toggleClass('open'); 
    }); 

}); 

Ich weiß, dass es ein bisschen schmutzig ist und könnte es bessere Möglichkeiten sein . Ich habe nicht überprüft, ob es funktioniert, aber das ist nur einer von ihnen, hoffe es hilft.