我正在制作一个三级菜单，但是，我很难让它正常工作。
当前问题：如果我们快速鼠标输入/ mouseleave很多次，它将破坏所有动画，并且鼠标悬停时菜单不会再次打开。
我想要的是什么：
1 - 当用户将鼠标悬停在主菜单上时，我想为第二级设置动画并淡化所有链接内容。当用户离开标题部分时。我想淡出链接内容和顶部滑动第二个菜单级别。注意：我还想删除队列效果，所以当用户开始关闭菜单时，我想重新打开它。
2 - 当第二级可见（链接）时，如果用户点击了about / contact部分，我将使用正确的内容滑动第三级菜单。注意：第二个菜单级别必须保持可见。如果用户点击关闭按钮，我将关闭第三级
3 - 在任何时候，如果用户离开标题区域，首先我需要淡出所有文本，然后滑动第二和第三个菜单。
任何帮助将不胜感激，谢谢
的Javascript
<script type="text/javascript">
jQuery(document).ready(function() {
var slidding_menu_speed=700;
var fadeIn_text_speed=1000;
var close_delay=800;
// We display London
// On click we hide london and show au
jQuery("header").mouseenter(function() {
if(jQuery("#main-header").hasClass("ok")) {
} else {
return false
}
// We slide the second menu first and fadeIn the text
jQuery("#slidding-header-menu").finish().slideDown(slidding_menu_speed, function() {
jQuery("ul#galleries").finish().animate({
opacity:1
},fadeIn_text_speed);
jQuery("ul#pages").finish().animate({
opacity:1
},fadeIn_text_speed);
});
}).mouseleave(function() {
jQuery("#main-header").removeClass("ok");
// calls close_menus after close_delay
setTimeout(close_menus,close_delay);
// close_menus();
});
// open and display the about section
// or hide, increase and display the about text
jQuery("#about").click(function() {
// If we click on the about section and the contact section is activated
if(jQuery("#slidding-about-contact-content #contact-content").hasClass("active")) {
// we fade the contact text
jQuery("#slidding-about-contact-content #contact-content").finish().animate({
opacity:0
},fadeIn_text_speed, function() {
jQuery("#slidding-about-contact-content #contact-content").finish().removeClass("active").css({
display:"none"
});
// jQuery("#slidding-about-contact-content #about-content")
// reduce the height of the container
jQuery("#relative-container-about-contact").finish().css({
height:"139px"
}).animate({
height:"168px"
}, function() {
// fadein contact text
jQuery("#slidding-about-contact-content #about-content").finish().addClass("active").css({
opacity:0
}).animate({
opacity:1
},fadeIn_text_speed);
});
});
} else {
// We do nothing if the about section has been clicked
if(jQuery("#slidding-about-contact-content #about-content").hasClass("active")) {
} else {
jQuery("#slidding-about-contact-content #contact-content").finish().css({
display:"none"
});
jQuery("#slidding-about-contact-content #about-content").finish().addClass("active");
jQuery("#slidding-about-contact-content").slideToggle(slidding_menu_speed, function() {
jQuery("#relative-container-about-contact").finish().animate({
opacity:1
},fadeIn_text_speed);
});
}
}
});
// open and display the contact section
// or hide, increase and display the contact text
jQuery("#contact").click(function() {
// If we click on the contact section and the about section is activated
if(jQuery("#slidding-about-contact-content #about-content").hasClass("active")) {
// we fade the about text
jQuery("#slidding-about-contact-content #about-content").finish().animate({
opacity:0
},fadeIn_text_speed, function() {
jQuery("#slidding-about-contact-content #about-content").removeClass("active").css({
display:"none"
});
// jQuery("#slidding-about-contact-content #contact-content")
// reduce the height of the container
jQuery("#relative-container-about-contact").css({
height:"168px"
}).animate({
height:"139px"
}, function() {
// fadein contact text
jQuery("#slidding-about-contact-content #contact-content").addClass("active").css({
opacity:0
}).finish().animate({
opacity:1
},fadeIn_text_speed);
});
});
} else {
// We do nothing if the contact section has been clicked
if(jQuery("#slidding-about-contact-content #contact-content").hasClass("active")) {
} else {
jQuery("#slidding-about-contact-content #about-content").css({
display:"none"
});
jQuery("#slidding-about-contact-content #contact-content").addClass("active");
jQuery("#slidding-about-contact-content").slideToggle(slidding_menu_speed, function() {
jQuery("#relative-container-about-contact").finish().animate({
opacity:1
},fadeIn_text_speed);
});
}
}
});
// Close about and contact section
jQuery("ul#pages #close").click(function() {
jQuery("#relative-container-about-contact").finish().animate({
opacity:0
},fadeIn_text_speed, function() {
jQuery("#slidding-about-contact-content").finish().slideUp(slidding_menu_speed);
// Remove active class
jQuery("#slidding-about-contact-content #contact-content").removeClass("active").css({
display:"block",
opacity:1
});
jQuery("#slidding-about-contact-content #about-content").removeClass("active").css({
display:"block",
opacity:1
});
});
});
// close all menus and init about/contact section
function close_menus() {
// $("header").unbind( "mouseenter","mouseleave");
// We fadeout the second level text and then slide up the second menu
jQuery("ul#pages").finish().animate({
opacity:0
},fadeIn_text_speed);
jQuery("ul#galleries").finish().animate({
opacity:0
},fadeIn_text_speed, function() {
jQuery("#slidding-header-menu").finish().slideUp(slidding_menu_speed, function() {
// $("header").bind( "mouseenter","mouseleave");
jQuery("#main-header").addClass("ok");
});
});
// At the same time we fade the contact/about text and slide top the third menu
// And initialise the contact/about content
jQuery("#relative-container-about-contact").finish().animate({
opacity:0
},fadeIn_text_speed, function() {
jQuery("#slidding-about-contact-content").finish().slideUp(slidding_menu_speed, function() {
// Remove active class
jQuery("#slidding-about-contact-content #contact-content").finish().removeClass("active").css({
display:"block",
opacity:1
});
jQuery("#slidding-about-contact-content #about-content").finish().removeClass("active").css({
display:"block",
opacity:1
});
});
});
}
});
</script>
答案 0 :(得分：1)
您应该尝试使用HoverIntent - http://cherne.net/brian/resources/jquery.hoverIntent.html
我已编辑您的示例以使用hoverIntent - http://jsfiddle.net/ek4z3/
我基本上将您的mouseenter()和mouseleave()事件分别更改为函数over()和out()。然后，您可以在hoverIntent中调用这些函数：
$("header").hoverIntent({
over: over,
out: out
});