Javascript 为什么jQuery hide（）不起作用，但fadeOut（）起作用？

为什么

hide（）

不工作？当我尝试将

hide（）

更改为

fadeOut（）

时，它就工作了。为什么?

$（文档）.ready（函数（）{
$（“.toggle”）.hover（函数（）{
$（“.submenu”）.hide（）；
$（this.find（“.submenu”）.first（）.show（）；
$（.hlavnacategoria”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
$（“.submenu”）.mouseleave（函数（）{
$（“.submenu”）.hide（）；//这不起作用吗？请尝试将其更改为淡出（）
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800600700&subset=拉丁文，拉丁文ext）；
html，
身体{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
字号：11pt；
}
html{
宽度：100%；
身高：100%；
背景：rgb（255、255、255）；
背景：-moz线性梯度（顶部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
背景：-webkit线性梯度（顶部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
背景：线性梯度（到底部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#e5'，GradientType=0）；
}
.内联{
显示：内联块；
垂直对齐：顶部；
保证金：0自动；
}
.隐藏{
显示：无；
}
大胆的
.斯特朗{
字体大小：粗体；
}
.填充20{
填充：20px；
}
.填充10{
填充：10px；
}
.标题{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
背景：1B6CBF；
高度：100px；
}
.大{
字号：18pt；
}
.菜单{
位置：绝对位置；
顶部：100px；
宽度：200px；
左：0px；
右边框：1px实心#323232；
文本对齐：右对齐；
}
.菜单ul{
列表样式：无；
保证金：0自动；
填充：0；
宽度：继承；
}
.菜单ul li.hlavnaKategoria{
光标：指针；
填充：10px 20px 10px 10px；
}
.menu ul li.hlavnaKategoria.子菜单{
位置：绝对位置；
顶部：0px；
左：201px；
宽度：800px；
背景：#323232；
显示：无；
文本对齐：左对齐；
身高：100%；
z指数：100；
}
.子菜单项框{
宽度：300px；
文本对齐：左对齐；
利润率：10px 5px 10px；
左边框：5px纯银；
}
.子菜单项框：悬停{
左边框：5px实心#1B6CBF；
}
.子菜单项框a{
文字装饰：下划线；
颜色：#fff；
}
li.hlavnaKategoria.active{
背景色：#323232；
右边框：0px；
颜色：白色；
}



菜单1
子菜单1


菜单2
子菜单1
子菜单2


在我看来，在
hide（）
之后调用了
show（）
，因为由于某种原因，在mouseleave之后会触发根菜单上的悬停事件。请看以下内容的输出：

$(document).ready(function(){
    $(".toggle").hover(function(){
        $(".submenu").hide();
    $('body').append('hovering, calling show() <br/>');
        $(this).find(".submenu").first().show();

        $(".hlavnaKategoria").removeClass("active");
        $(this).addClass("active");
    }); 

    $(".submenu").mouseleave(function(){
    $('body').append('mouse left, calling hide() <br/>');
        $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
    });
});

$（文档）.ready（函数（）{
$（“.toggle”）.hover（函数（）{
$（“.submenu”）.hide（）；
$（'body'）.append（'悬停，调用show（）
'）；
$（this.find（“.submenu”）.first（）.show（）；
$（.hlavnacategoria”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}); 
$（“.submenu”）.mouseleave（函数（）{
$（'body'）.append（'鼠标左键，调用hide（）
'）；
$（“.submenu”）.hide（）；//这不起作用吗？请尝试将其更改为淡出（）
});
});

我检查了fadeout，同样的事情也发生了，我认为它看起来“有效”，因为show（）拒绝中断动画。动画完成后，新的悬停事件将恢复透明度，但当透明度为中间值（如50%）时不会恢复

解决方案？悬停事件同时具有in和out处理程序。希望这些方面的时机是正确的。i、 e.out处理程序可以隐藏子菜单，这将是它的结束。
似乎您使用的悬停函数有点错误。

首先，若您输出日志以查看何时调用您的函数，您可以看到您的鼠标没有调用，因为要启动它，您应该在类子菜单的元素上方。所以，这个元素在toggle中，当你们离开它的时候，你们也离开了toggle类的元素，这个类再次启动了悬停函数

若淡出动画是延迟的，那个么在调用show函数之后，实际上你们隐藏了元素。以防隐藏您隐藏元素，并立即显示它

要解决这个问题，你应该在handerIn中使用和显示，并在handlerOur中隐藏

样本：
$（文档）.ready（函数（）{
$（“.toggle”）.hover（函数（）{
log（'hover in'）；
$（this.find（“.submenu”）.first（）.show（）；
$（此）.addClass（“活动”）；
}，函数（）{
log（'hover out'）；
$（.hlavnacategoria”）.removeClass（“活动”）；
$（“.submenu”）.hide（）；
});
});
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400800600700&subset=拉丁文，拉丁文ext）；
html，
身体{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
字号：11pt；
}
html{
宽度：100%；
身高：100%；
背景：rgb（255、255、255）；
背景：-moz线性梯度（顶部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
背景：-webkit线性梯度（顶部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
背景：线性梯度（到底部，rgba（255，255，255，1）0%，rgba（229，229，229，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#e5'，GradientType=0）；
}
.内联{
显示：内联块；
垂直对齐：顶部；
保证金：0自动；
}
.隐藏{
显示：无；
}
大胆的
.斯特朗{
字体大小：粗体；
}
.填充20{
填充：20px；
}
.填充10{
填充：10px；
}
.标题{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
背景：1B6CBF；
高度：100px；
}
.大{
字号：18pt；
}
.菜单{
位置：绝对位置；
顶部：100px；
宽度：200px；
左：0px；
B