带有计时器的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 对超时事件的一些解释。

Answer 2

使用以下代码：

    $('.games').hover(function() {
        timeout = setTimeout('showSubGames()', 1000);
    });

function showSubGames()
{
 $("#games-sub").animate({ top : "160px" }, 300);
}

Answer 3

我从您的问题中了解到您希望将slidingUp 功能延迟5 秒；因此，您的解决方案是使用 .delay，如下所示：

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

Answer 4

你必须在 mouseleave 上添加一个事件

$(".games").mouseleave(function(){

        $("#games-sub").animate({ top : "-200px" }, 300).delay(300);

    }

或者没有延迟：

$(".games").mouseleave(function(){

        $("#games-sub").animate({ top : "-200px" }, 300);

    }