アニメーション連鎖のトグルメニュー

Question

私は、明らかにクリックで表示されるオーバーレイメニューをコーディングしようとしています。つまり、画面に表示するのは単なる色付きのオーバーレイではありません。むしろ、レイアウト要素に何らかのフェードアウトアニメーションが発生している場合、メニューが表示されます。もう一度同じボタンをクリックすると、メニューが消え、要素が順番に消えます。 私は、これを2つの状態の切り替え時点まで認識することができました。どのようにして2つの状態を切り替えることができますか？

HTML

<div class="menu-contact trans-short"> 
    <dir class="wrap"> 
    <!-- 
    these 2 are one button. depending on the state one disappears 
    --> 
    <a href="#" class="btn-contact">CONTACT</a> 
    <a href="#" class="btn-contact-close off">CLOSE</a> 
    </dir> 
</div> 

jQueryの

  var contact; 

      // contact button 
      $(document).on('click', 'a.btn-contact', function(){ 
       var contact = true; 
      }); 
      $(document).on('click', 'a.btn-contact-close', function(){ 
       var contact = false; 
      }); 

      if (contact == true) { 

        // disable scrolling 
        $.fn.fullpage.setAllowScrolling(false); 
        $.fn.fullpage.setKeyboardScrolling(false); 

        setTimeout(function() { 
         // switch to display block 
         $(".content-wrapper-contact").removeClass("off"); 
        }, 300); 

        // fade out other elements 
        $('.container').addClass('blur'); 
        $(".content-wrapper").fadeOut(300); 
        $(".page-title").fadeOut(600); 

        setTimeout(function() { 
         $('.nav-bottom li').addClass('fade'); 
         $('.media-container').addClass('blur'); 
         $('.overlay-title').addClass('reveal'); 

        }, 800); 

        // button animation: contact -> close 
        $('.menu-contact').addClass('fade a-to-top'); 
        setTimeout(function() { 
         // fade in the overlay container 
         $(".content-wrapper-contact").removeClass("fade"); 

         $('.btn-contact').addClass('off'); 
         $('.btn-contact-close').removeClass('off'); 
         setTimeout(function() { 
          $('.menu-contact').removeClass('fade a-to-top'); 
         }, 510); 
        }, 510); 
      } 
      else if (contact == false) { 

        // button animation: close -> contact 
        $('.menu-contact').removeClass('fade a-to-top'); 
        setTimeout(function() { 
         // fade in the overlay container 
         $(".content-wrapper-contact").addClass("fade"); 

         $('.btn-contact').removeClass('off'); 
         $('.btn-contact-close').addClass('off'); 
         setTimeout(function() { 
          $('.menu-contact').addClass('fade a-to-top'); 
         }, 510); 
        }, 510);  
      } 

Answer 1

ページがロードされたときに、リンクがクリックされたときに

if (contact == true) { ... 

内のスクリプトだけでなく、呼び出されます。あなたは、例えばちょうどここfiddleだ

// contact button 
$(document).on('click', 'a.btn-contact', function(){ 

    // disable scrolling 
    $.fn.fullpage.setAllowScrolling(false); 
    $.fn.fullpage.setKeyboardScrolling(false); 

    setTimeout(function() { 
    // switch to display block 
    $(".content-wrapper-contact").removeClass("off"); 
    }, 300); 

    // fade out other elements 
    $('.container').addClass('blur'); 
    $(".content-wrapper").fadeOut(300); 
    $(".page-title").fadeOut(600); 

    setTimeout(function() { 
    $('.nav-bottom li').addClass('fade'); 
    $('.media-container').addClass('blur'); 
    $('.overlay-title').addClass('reveal'); 

    }, 800); 

    // button animation: contact -> close 
    $('.menu-contact').addClass('fade a-to-top'); 
    setTimeout(function() { 

    // fade in the overlay container 
    $(".content-wrapper-contact").removeClass("fade"); 

    $('.btn-contact').addClass('off'); 
    $('.btn-contact-close').removeClass('off'); 
    setTimeout(function() { 
     $('.menu-contact').removeClass('fade a-to-top'); 
    }, 510); 
    }, 510); 

}); 

$(document).on('click', 'a.btn-contact-close', function(){ 

    // button animation: close -> contact 
    $('.menu-contact').removeClass('fade a-to-top'); 
    setTimeout(function() { 

    // fade in the overlay container 
    $(".content-wrapper-contact").addClass("fade"); 

    $('.btn-contact').removeClass('off'); 
    $('.btn-contact-close').addClass('off'); 
    setTimeout(function() { 
     $('.menu-contact').addClass('fade a-to-top'); 
    }, 510); 
    }, 510); 

}); 

すなわち

、クリック機能に直接コードを移動することができます。