JQueryのトグル機能はクリックではロードされず、3回目のクリック時にのみ

Question

バーガーナビゲーションをクリックすると、背景がフェードインした後にメニュー情報をドロップしようとしています。フェージングのみ。連続してクリックすると動作します。私はここで間違って何をしていますか？どのように私はそれを最初のクリックで動作させることができます。

https://jsfiddle.net/mo16z57j/

// variables 
var $header_top = $('.header-top'); 
var $nav = $('nav'); 


// toggle menu 
$header_top.find('a').on('click', function() { 
    $(this).parent().toggleClass('open-menu'); 
    $('.navOpen') 
    .css('opacity', 0).delay(800) 
    .slideDown('slow') 
    .animate(
    { opacity: 1 }, 
    { queue: false, duration: 'slow' } 
).toggle(); 
}); 

Answer 1

一つだ次のコード

$header_top.find('a').on('click', function() { 
    $(this).parent().toggleClass('open-menu'); 
    $('.navOpen') 
     .css('opacity', 0).delay(800) 
     .show() 
     .slideDown('slow') 
     .animate(
      { opacity: 1 }, 
      { queue: false, duration: 'slow' } 
    ).toggle(); 
});