用動畫鏈切換菜單

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。