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

Answer 2

使用以下代码：

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

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

Answer 3

我从您的问题中了解到，您希望将slideUp功能延迟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);

    }