Jquery 动画一个三级菜单答案

【问题标题】：Jquery animate a three levels menuJquery 动画一个三级菜单
【发布时间】：2014-02-28 10:49:01
【问题描述】：

我正在构建一个包含三个级别和悬停动画的菜单。

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();
                });
        });

【问题讨论】：

标签： jquery html animation slidetoggle

【解决方案1】：

只是给你一个想法：http://jsfiddle.net/S9Gpa/12/，我想你会自己管理它来淡出链接文本。顺便说一句：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();
});

【讨论】：