Jquery 什么'；添加叠加DIV的延迟和转换的最佳方式是什么？

我不太擅长JS，所以请容忍我

我有这部分代码，当菜单悬停在上面时，会在站点上显示一个覆盖图

$('#menu-main-menu > .menu-parent-item').hover(
    // when hovered
        function() {
            $('#overlay').css('display','block');
        },
    // when NOT hovered
        function() {
            $('#overlay').css('display','none');
        }
);

当鼠标悬停在菜单上时，叠加div立即显示。菜单项本身有一个不错的CSS淡入淡出，但我想应用一个平滑的过渡，或延迟叠加div

这样的东西可以很容易地添加到这个代码中，或者通过CSS转换来执行会更好吗？

使用/with

duration

like

$('#menu-main-menu > .menu-parent-item').hover(
    // when hovered
        function() {
            $('#overlay').fadeIn(1000);
        },
    // when NOT hovered
        function() {
            $('#overlay').fadeOut(1000);
        }
);

或者，您可以使用/with

duration

来维护

显示：block/none

$('#menu-main-menu > .menu-parent-item').hover(
    // when hovered
        function() {
            $('#overlay').show(1000);
        },
    // when NOT hovered
        function() {
            $('#overlay').hide(1000);
        }
);

---

setTimeOut应该允许延迟

setTimeout(
  function() 
  {
    //your code 
  }, 5000);

---

这很好，也很简单，尽管当从一个菜单项传递到另一个菜单项时，覆盖层会淡出，然后再次进入，在理想情况下，覆盖层应该保持可见，直到鼠标离开整个菜单。如果你能把目标改成菜单，那就好了@李，你能再给我看一些代码或小提琴吗？我是说第一行。当我删除

>菜单父项时，我获得了所需的行为，并且只针对菜单容器。也只是想让你知道，当我尝试延迟显示/隐藏时，它不会褪色。。它从左边滑入。@Lee，对于show/hide，我相信如果你传入一个
easing
变量，你可以实际控制方向，不，我不能只使用菜单容器，因为我不针对每个菜单项，只针对那些有子项的菜单项。这是否应该覆盖我上面粘贴的整个代码？还是“你的代码”适用于两个css（显示）部分？