Question

我正在构建一个多级菜单，其中子菜单用jquery显示。当主链路悬停时它会下降，然后在鼠标离开时向上滑动。当鼠标悬停处于活动状态时，我想停止鼠标移动操作，但我无法停止第二个事件（animate-＆gt; margin-bottom）。我是jquery的新手，所以我经历了很多问题并且搜索了很多，但我并不真正理解我应该在这里做什么。任何帮助将不胜感激！

jQuery(".item-102 a").on('mouseenter', function() {
  jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
  jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
  jQuery("#submenu").delay(2000).slideUp("slow");
  jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});

jQuery("#submenu").on('mouseover', function() {
  jQuery(this).stop();
});

Answer 1

试试：

jQuery("#submenu").on('mouseover', function()
{
  jQuery(this).stop();
  jQuery("#horizontal-menu").stop();
});

Answer 2

我设法做到了，谢谢大家。 Hsz的答案很好，但它并没有完全阻止这个事件，所以这就是解决方案：

function(){
jQuery(".item-102 a").on('mouseenter', function() {
    jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
        jQuery("#submenu").slideDown("slow");
});

var hover_off = false;
jQuery("#submenu").mouseover(function (){
    hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
    hover_off = true;
    setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
    if (hover_off == true){
        jQuery("#submenu").delay(1000).slideUp("slow");
        jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
    }
};

停止第二次活动

2 个答案: