带有一系列动画的切换菜单

Question

显然，我将编写一个通过单击显示的覆盖菜单。问题是，它不仅仅是施加在屏幕上的纯色覆盖层。相反，布局元素发生了某些淡出动画，然后菜单出现了。再次单击同一个按钮，菜单消失，然后元素一个接一个地淡入。 我设法实现了这一点，直到在两种状态之间切换。如何在两种状态之间切换？

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) { ...

仅在页面加载时调用，而不是在单击链接时调用。例如，您可以将代码直接移动到点击函数中，即

// 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);  

});

这是fiddle。