jquery動畫三級菜單

Question

我正在用懸停動畫構建一個包含三個級別的菜單。

Here is a JSFIDLE of my menu

我的目標：

1 - 當用戶徘徊在主頂部菜單，我想動畫的第二級和淡入各個環節的內容。當用戶離開標題部分時。我想淡出鏈接內容並滑到第二個菜單級別。注意：我想刪除隊列效果。

2 - 當第二級別可見（鏈接）時，如果用戶正在點擊關於/聯繫部分，我將滑動第三個菜單級別並顯示正確的內容。注意：第二個菜單級別必須保持可見。如果用戶點擊關閉按鈕，我將關閉第三層面

3 - 在任何時候，如果用戶離開標題區域，首先需要淡出所有文本，然後，頂部的第二和第三菜單。

任何幫助將是非常讚賞=） 感謝

HTML：

<header> 
    <div id="main-header"> 
     <div class="left"><img src="http://design-online-logo.com/wp-content/uploads/2013/10/Deutsch-Logo.png"></div> 
     <div class="middle"><a href=""><img src="http://design-online-logo.com/wp-content/uploads/2013/10/Deutsch-Logo.png"></a></div> 
     <a id="tray-button"><div class="right"></div></a> 
    </div><!-- main-header --> 
    <div id="slidding-header-menu"> 
     <div id="relative-container"> 
      <ul id="galleries"> 
       <li><a>sunshine</a></li><li><a>ok</a></li><li><a>test</a></li>    
      </ul><!-- galleries --> 
      <ul id="pages"> 
       <li id="about"><p>ABOUT</p></li> 
       <li id="contact"><p>CONTACT</p></li> 
       <li><img src="http://localhost/ashvasali/wp-content/themes/ashvasali/assets/img/ash/Ash-Vesali-close.png"></li> 
      </ul><!-- pages --> 
     </div><!-- relative-container --> 
    </div><!-- slidding-header-menu --> 
    <div id="slidding-about-contact-content"> 
     <div id="relative-container-about-contact"> 
      <div id="about-content"> 
       <p>"ABOUT CONTENT</p> 
      </div>  
      <div id="contact-content"> 
       <p id="tel">CONTACT</p> 
       <p id="email">CONTENT</p>  
       <div id="logo-container"> 
        <div id="tumblr"></div> 
        <div id="instagram"></div> 
        <div id="twitter"></div> 
       </div><!-- logo-container --> 
      </div> 
     </div><!-- relative-container-about-contact --> 
    </div><!-- slidding-about-contact-content --> 
</header> 

我的JS：

 jQuery("header").hover(function() { 
      jQuery("#slidding-header-menu").slideToggle(); 
       jQuery("#about").click(function() { 
        jQuery("#slidding-about-contact-content").slideToggle(); 
       }); 
     }); 

Answer 1

只給你一個想法：http://jsfiddle.net/S9Gpa/12/，我想你會自己管理它來淡化林k文本。順便說一句：hover已棄用。

jQuery("header").mouseenter(function() { 
    jQuery("#slidding-header-menu").finish().slideDown(); 
}).mouseleave(function() { 
    jQuery("#slidding-header-menu").finish().slideUp(); 
    jQuery("#slidding-about-contact-content").finish().slideUp(); 
}); 

jQuery("#about").click(function() { 
    jQuery("#slidding-about-contact-content").slideToggle(); 
});