全画面オーバーレイのスタイルとエフェクトを修正する方法

Question

ナビゲーションのメニューリンクをクリックしてこのエフェクトをトリガーしたボタンを元の状態に戻すと、オーバーレイエフェクトが消えるようにしようとしています。

これは、あなたはそれがどのようにこれを達成することができるリンクを押した後に消えdoes notのオーバーレイを開いた後に気づいたとして、それが http://tympanus.net/Development/FullscreenOverlayStyles/#

を何ですか？

私は種類の動作しません。このコード

$('#overlay-menu ul li a').click(function(){ 
    $("#overlay").slideUp("fast"); 
    $(".button_container").removeClass("active"); 

}); 

$('.button_container').click(function(event){ 
    $("#overlay").slideDown("fast"); 
    $(".button_container").removeClass("active"); 

}); 

を試みたが、ボタンが正しくないアクションがそれに適用していることは「X」アイコンの代わりに、メニューアイコンを有している場合には、それだけで動作しますすることができます。

JSFIDDLE

http://jsfiddle.net/HT9Bx/566/

申し訳ありませんが、実際のリンクが何らかの理由で表示していますが、中心の上にマウスを置く場合は、カーソルがアクティブに見ることができますいけません。メニューボタンに正しいアイコンが表示された状態で、どうやって開いて、オーバーレイを閉じることができますか？

これは意味があると考えて、説明するのはかなり難しいと感じました。しかし、あなたがjsfiddleを使って周りを見回すならば、リンクがオーバーレイの中心にあることを理解するだけです。

Answer 1

同じ要素に対して3回のクリックイベントがあるためです。 コメントを解除$(".button_container").removeClass("active");

$('#overlay-menu ul li a').click(function(){ 
    $("#overlay").slideUp("fast"); 
    //$(".button_container").removeClass("active"); 
}); 

$('.button_container').click(function(event){ 
    $("#overlay").slideDown("fast"); 
    //$(".button_container").removeClass("active"); 
}); 

$('#toggle').click(function() { 
$(this).toggleClass('active'); 
$('#overlay').toggleClass('open'); 
}); 

Demo