jQuery为三个级别的菜单设置动画 [英] Jquery animate a three levels menu
问题描述
我正在构建一个带有悬浮动画的三级菜单。
I'm building a menu compose of three levels with hover animations.
我的目标:
1-当用户将鼠标悬停在顶部的主菜单上时,我想为第二级设置动画并淡入所有链接内容。当用户离开标题部分时。我想淡出链接内容,并在第二级菜单上滑动顶部。注意:我想删除队列效果。
1 - When the user is hovering the main top menu, I would like to animate the second level and fadein all links content. When the user is leaving the header section. I would like to fadeout links content and top slide the second menu level. Note: I would like to remove the queue effect.
2-当第二级可见(链接)时,如果用户单击关于/联系部分,则使用正确的内容滑动第三级菜单。注意:第二级菜单必须保持可见。如果用户单击关闭按钮,那么我正在关闭第三级
2 - When the second level is visible (links), if the user is clicking on the about/contact section I'm sliding the third menu level with the correct content. Note: the second menu level has to stay visible. If the user is clicking on the close button, I'm closing the third level
3-在任何时候,如果用户要离开标题区域,则首先需要淡出所有文本,然后滑动第二个和第三个菜单。
3 - At any moment, if the user is leaving the header area, first I need to fade out all text, and then, slide-top the second and third menu.
任何帮助将不胜感激=)
谢谢
Any help would be very appreciated =) Thanks
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();
});
});
推荐答案
只给您一个想法: http://jsfiddle.net/S9Gpa/12/ ,我想您可以自行管理它以淡出链接文本。顺便说一句: hover
已过时。
Just to give you an idea: http://jsfiddle.net/S9Gpa/12/, I guess you will manage it by yourself to fadeOut the link texts. By the way: hover
is deprecated.
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();
});
这篇关于jQuery为三个级别的菜单设置动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!