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

Вы должны добавить событие в mouseleave

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

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

    }

или без задержки:

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

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

    }

Answer 2

используйте следующий код:

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

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

Answer 3

Из вашего вопроса я понимаю, что вы хотите отложить функцию SlipUp на 5 секунд;поэтому ваше решение заключается в использовании .delay, как показано ниже:

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

Answer 4

вы можете подключиться к mousein и mouseout событиям div.
на mouseout вы начнете событие timeout, которое закроет div через 5 секунд.
на mousein вы бы проверили, существует ли событие тайм-аута для закрытия div. если так - отмени это. если нет - покажите div.
здесь пояснение событий тайм-аута.