Jquery为三级菜单设置动画

我正在使用hover动画构建一个包含三个级别的菜单。

这是我菜单的JSFIDLE

我的目标：

1 – 当用户将鼠标hover在主菜单上时，我想设置第二级动画并淡化所有链接内容。 当用户离开标题部分时。 我想淡出链接内容和顶部滑动第二个菜单级别。 注意：我想删除队列效果。

2 – 当第二级可见（链接）时，如果用户点击了about / contact部分，我将使用正确的内容滑动第三级菜单。 注意：第二个菜单级别必须保持可见。 如果用户点击关闭按钮，我将关闭第三级

3 – 在任何时候，如果用户离开标题区域，首先我需要淡出所有文本，然后滑动第二和第三个菜单。

任何帮助将非常感激=）谢谢

HTML：

 
 
 
 
 
 
 
 
 
sunshine
ok
test
 
 
 
ABOUT
 
CONTACT
 
 
 
 
 
 
 
 
"ABOUT CONTENT
 
 
 
CONTACT
 
CONTENT
 
 
 
 
 
 
 
 
  

我的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/ ，我想你会自己管理它来淡出链接文本。 顺便说一下：不推荐使用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(); });