HOWTO：まず、私は次のようにアニメーション化するモバイルバーガーメニュー構築しようとしています2

Question

、第2のクリックアニメーションをアニメーション1をクリックしてください：

1）バーガーメニューで1をクリックしてください：メニューオープンアニメーションを... NAVリンクがフェードインで最後
2）バーガーメニューで2をクリックしてください：ナビゲーションリンクはフェードアウト最初...メニュー近いアニメーション

を私はjQueryを使ってアニメーション化しています：

/* 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'); 
    }); 

}); 

2回目のクリック（メニューを閉じる）に別のクラスを設定するにはどうすればよいですか？

Answer 1

あなたはJS側でそれをしたい場合は、なぜあなたはそれが動作するかどうかを確認、カウント変数を追加しようといけない：

/* 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'); 
    }); 

}); 

私はそれが少し汚れて知っているとより良い方法があるかもしれません。私はそれが動作するかどうかをチェックしていないが、これはそれらの1つだけです、それが助けて欲しいです。