Javascript在菜单项上没有延迟，但是悬停离开菜单时有5秒延迟

Javascript no delay on menu items, but 5 second delay when hover off menu

本文关键字：延迟 悬停 离开 菜单 5秒 菜单项 Javascript      更新时间：2023-09-26

我有一个下拉菜单，我希望能够悬停在每个下拉，有0.3秒的延迟，但当你滚下菜单，我希望它暂停2秒前淡出。

标记:

<ul class="mainnav">
    <li><a href="#">item 1</a>
        <ul class="sub">
            <li><a href="#">item a</a></li>
            <li><a href="#">item b</a></li>
            <li><a href="#">item c</a></li>
        </ul>
    </li>
    <li><a href="#">item 2</a>
        <ul class="sub">
            <li><a href="#">item d</a></li>
            <li><a href="#">item e</a></li>
            <li><a href="#">item f</a></li>
        </ul>
    </li>
</ul>
jquery: 

function(){
    $('.mainnav > li').hover(
        function () {
             $(this).find('sub').fadeIn(300);
             },
        function () {
             $(this).find('sub').fadeOut(300);
        }
    );
    $('.mainnav').mouseout( function() {
        setTimeout(function() {
           $(this).find('sub').fadeOut(300);
        }, 2000);
    });
}

因此，如果我翻转'item 1'，它会向下拉并显示'item a'， 'item b'， 'item c'。如果我滚动'项目2'，它会向下拉并显示'项目d'， '项目e'， '项目f'。

现在如果我滚出'。Mainnav '我希望滚动的下拉菜单在淡出之前延迟。

但这不是它在做什么。它只是逐渐消失，就像在另一个菜单项上滚动一样。

您使用选择器的方式错误。$('sub')将查找名为 sub的标签，但是您想要查找具有类sub的元素，您应该使用$('.sub')。这并不能解决你的问题。试试下面的代码

       $('.mainnav > li').hover(
           function () {
              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');
              setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)
           }
        );

并且您不需要为.mainnav单独的mouseout事件处理程序。jquery hover的第二个参数是mouseout处理程序。

为了描述我的答案，创建var sub = $(this).find('.sub');是为了保存对悬停的.sub的引用并将其传递给函数，因为匿名函数中的this将引用window对象

更新

如果用户将鼠标从菜单上移开并在菜单完全淡出之前再次悬停鼠标，则下面的代码将防止淡出+淡出。

        $('.mainnav > li').hover(
           function () {
              //this clears the timeout that is going to cause a fadeout
              window.clearTimeout(window.menufade);
              $(this).find('.sub').fadeIn(300);
           },
           function () {
              var sub = $(this).find('.sub');
              //this clears the timeout that is going to cause a fadeout, not necessary here I think, but i'll let it be :)
              window.clearTimeout(window.menufade);
              window.menufade = setTimeout(function () {
                 sub.fadeOut(300);
              }, 2000)
           }
        );
相关文章：