javascript - jquery 带定时器的下拉菜单

Question

我想制作 html/jquery 下拉菜单。但我有一个问题。我希望当鼠标转到“游戏”导航按钮时，div 会下降并仅在鼠标离开 5 秒后消失，而不是 5 秒后(这是我的问题)，而不是立即消失。这是到目前为止我所做的

JS

    var games_timer = $.timer(slidingUP("#games-sub", "-200px")); games_timer.set({ time : 3000, autostart : false });

    function slidingUP($name, $value){
        $($name).animate({ top : $value }, 300);
        }

    $(".games").hover(function(){
            if (games_timer.active){games_timer.stop();}
            $("#games-sub").animate({ top : "160px" }, 300);

        }, function(){
            games_timer.play();
        });

它会向下滑动，但不会向上滑动

HTML:

<ul>
 <li class="nav-a1"><a id="home" href="">Home</a></li>
 <li class="nav-a2"><a id="games" class="games" href="">Games</a></li>
 <li class="nav-a2"><a id="upcomming" href="">Upcomming</a></li>
 <li class="nav-a2"><a id="trailers" href="">Trailers</a></li>
 <li class="nav-a2"><a id="blog" href="">Blog</a></li>
 <li class="nav-a2"><a id="login" href="">Login</a></li>
</ul>

<div id="games-sub" class="games">
    <a href="">ACTION</a>
    <a href="">ADVANTURE</a>
    <a href="">ARCADE</a>
    <a href="">SHOOTER</a>
    <a href="">FIRST PERSON</a>
    <a href="">THIRD PERSON</a>
    <a href="">STRATEGY</a>
    <a href="">SPORT</a>
</div>

Answer 1

您可以连接到 div 的 mousein 和 mouseout 事件。
在 mouseout 上，您将启动一个 timeout 事件，该事件将在 5 秒内关闭 div。
在 mousein 上，您将检查是否存在关闭 div 的超时事件。如果是这样-取消它。如果没有 - 显示 div。
here关于超时事件的一些解释。