Jquery JavaScript mouseenter和mouseleave淡入淡出效果闪烁

我在JS fiddle中做了一个例子，如果你将鼠标悬停在“墙”上，然后将光标移动到下拉菜单上，下拉菜单会在下面淡出。在你可以使用它之前，它会逐渐消失然后消失

我尝试过使用超时并检查它是否是相同的悬停父对象。当你完全脱掉它的时候，它不会继续工作

}))

当鼠标悬停在项目墙上时，当您尝试将鼠标悬停在下面的项目列表上时，它不应消失

---

提前感谢。

问题是，当从选项卡移动到下面的菜单时，会触发

鼠标移动

/

鼠标移动

。要解决此问题，请在淡入淡出之前添加一个

stop（）

调用，以便在添加新动画之前将动画队列移动到末尾：

$（文档）.ready（函数（）{
（'mouseenter'，function（）上的$（'.places.place链接，.place_下拉列表'）{
var placement=$（this）.data（'placement'）；
$（“#放置#链接"+放置）.addClass（'悬停'）；
$（“#放置#下拉列表"+放置）.addClass（'hovered'）.stop（true）.fadeIn（350）；
});
$（'.places.place链接，.place_下拉列表'）。在（'mouseleave'，function（）上{
var placement=$（this）.data（'placement'）；
$（“#放置#链接"+放置）.removeClass（'悬停'）；
$（“#放置#下拉列表"+放置）.removeClass（'hovered'）.stop（true）.fadeOut（350）；
});
});
正文{
背景：#fff；
填充：20px；
字体系列：Helvetica；
}
李女士{
显示：内联块；
右边距：100px
}
.place_下拉列表{
边框：1px纯黑；
利润上限：-15px
}



墙


地板


墙










地板










问题是因为从选项卡移动到下面的菜单时会触发
鼠标移动
/
鼠标移动
。要解决此问题，请在淡入淡出之前添加一个
stop（）
调用，以便在添加新动画之前将动画队列移动到末尾：


$（文档）.ready（函数（）{
（'mouseenter'，function（）上的$（'.places.place链接，.place_下拉列表'）{
var placement=$（this）.data（'placement'）；
$（“#放置#链接"+放置）.addClass（'悬停'）；
$（“#放置#下拉列表"+放置）.addClass（'hovered'）.stop（true）.fadeIn（350）；
});
$（'.places.place链接，.place_下拉列表'）。在（'mouseleave'，function（）上{
var placement=$（this）.data（'placement'）；
$（“#放置#链接"+放置）.removeClass（'悬停'）；
$（“#放置#下拉列表"+放置）.removeClass（'hovered'）.stop（true）.fadeOut（350）；
});
});
正文{
背景：#fff；
填充：20px；
字体系列：Helvetica；
}
李女士{
显示：内联块；
右边距：100px
}
.place_下拉列表{
边框：1px纯黑；
利润上限：-15px
}



墙


地板


墙










地板










谢谢你的工作。不幸的是，完整的菜单，这是在我将无法与CSS，但感谢提示！谢谢你的工作。不幸的是，完整的菜单，这是在我将无法与CSS，但感谢提示！
$(document).ready(function () {

$('.places .place-link, .place_dropdown').one().on('mouseenter', function () {
    $("#place_link_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).addClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeIn(350);
});

$('.places .place-link, .place_dropdown').one().on('mouseleave', function () {
    $("#place_link_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).removeClass('hovered');
    $("#place_dropdown_" + $(this).data('placement')).fadeOut(350);
});