Jquery下拉菜单与定时器

jquery drop down menu with timer

本文关键字：定时器 下拉菜单 Jquery      更新时间：2023-09-26

我想让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>

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

使用以下代码:

    $('.games').hover(function() {
        timeout = setTimeout('showSubGames()', 1000);
    });
function showSubGames()
{
 $("#games-sub").animate({ top : "160px" }, 300);
}

我从你的问题中了解到你想延迟slidingUp功能5秒;因此，您的解决方案是像下面这样使用.delay:

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

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

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

或无延迟:

$(".games").mouseleave(function(){
        $("#games-sub").animate({ top : "-200px" }, 300);
    }
相关文章：