Javascript 停止第二个事件

我正在构建一个多级菜单，其中子菜单使用jquery显示。 当主链接悬停时，它会下降，当鼠标离开时，它会向上滑动。 当mouseover处于活动状态时，我想停止mouseleave操作，但无法停止第二个事件（动画->边距底部）。我是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();
});

试一下：

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

试一下：

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

---

我已经做到了，谢谢大家。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);
    }
};

---

我已经做到了，谢谢大家。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);
    }
};

---

JSFIDLE将非常受欢迎，我正在将其作为joomla模板的一部分进行开发。很抱歉，我无法提供JSFIDLE。请尝试绑定到而不是

mouseover

…抱歉，我刚刚更新了代码。有一个鼠标器事件，所以它没有这样的工作。考虑使用不足。js方法（）jsFoDLE将非常感谢我作为JoOMLA模板的一部分。很抱歉，我无法提供JSFIDLE。请尝试绑定到而不是

mouseover

…抱歉，我刚刚更新了代码。有一个鼠标器事件，所以它没有工作的方式。考虑使用不足。js方法（）它的部分工作，谢谢！但当我用鼠标在它上面摆动时，它开始一个像素一个像素地累加+20px的边距底部。我可以推迟吗？它部分工作，谢谢！但当我用鼠标在它上面摆动时，它开始一个像素一个像素地累加+20px的边距底部。我可以推迟吗？