jquery drop down menu with timer

Question

I want to make html/jquery drop down menu. But I have a problem. I want that when mouse goes to "games" navigation button, div came down and only disappeared when the mouse is out FOR 5 seconds, not AFTER 5 seconds (this is my problem), not instantly. Here it is what I have done, so far

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();
        });

It slides down, but never slides up

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>

have you tried to `setTimeout` and `clearTimeout`? Plus, you could add your code on a [jsfiddle](http://jsfiddle.net/8dP78/) with some css. It will be easier for us to help. — JMax, Dec 28 '11 at 08:57
http://stackoverflow.com/questions/2295049/jquery-timer-how-do-i-do-this — zdrsh, Dec 28 '11 at 08:57

J. Ed · Answer 1 · 2011-12-28T09:18:28.613

0

you can hook up to the mousein and mouseout events of the div.
on mouseout, you would start a timeout event that would close the div in 5 seconds.
on mousein you would check if a timeout event for closing the div exists. if so- cancel it. if not- show the div.
here's some explanation concerning timeout events.

edited Dec 28 '11 at 09:18

answered Dec 28 '11 at 09:00

J. Ed

6,692
4
39
55

score 0 · Answer 2 · answered Dec 28 '11 at 10:02

0

use the following code:

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

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

answered Dec 28 '11 at 10:02

Yazan Malkawi

501
4
10

Thanks everyone who answered my question, but here is what i have done, and it doesn't works: var games_timer = $.timer(slideUP("#games-sub", "-200px")); timer.set({ time : 3000, autostart : false }); function slideUP($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(); }); can someone tell me what is wrong with it? – Irakli Dec 28 '11 at 10:15
firstly, slideUp is a predefined function in jquery so i advise you to change its name unless you are trying to override it. and please try to mark the code like this `code` so as to clarify it – Yazan Malkawi Dec 28 '11 at 10:19
`var games_timer = $.timer(slidingUP("#games-sub", "-200px")); 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(); });` – Irakli Dec 28 '11 at 10:22
did you try to change the name of slideUp function? – Yazan Malkawi Dec 28 '11 at 10:30

score 0 · Answer 3 · edited Jan 26 '12 at 16:49

0

I understand from your question that you want to delay the slidingUp function 5 seconds; therefore, your solution is to use the .delay like the following:

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

edited Jan 26 '12 at 16:49

jamesmortensen

33,636
11
99
120

answered Dec 28 '11 at 11:23

Yazan Malkawi

501
4
10

ok can you repeat your question here again, what do you want to happen on hover and onmouse out – Yazan Malkawi Dec 28 '11 at 11:46

score 0 · Answer 4 · edited Jan 26 '12 at 16:50

0

You have to add an event on mouseleave

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

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

    }

or without the delay:

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

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

    }

edited Jan 26 '12 at 16:50

jamesmortensen

33,636
11
99
120

answered Dec 28 '11 at 12:13

Yazan Malkawi

501
4
10

ok, I know that it is an easy answer, but you must mention that when mouse goes From "games" to sub menu, this sub menu will go up and down for few times, that's why I want to use the time, I want that sub menu went up when mouse will be out FOR 3 seconds, NOT AFTER 3 seconds, did you get it? – Irakli Dec 28 '11 at 12:17
I can suggest a whole new approach to do your menu if you want. because i dont think its correct to assume that the user will click in 3 seconds – Yazan Malkawi Dec 28 '11 at 12:29
coooome ooonn dude, you just don't want to understand me, I didn't say that user will click something in 3 seconds... I give up, is anybody here who can really understand me? – Irakli Dec 28 '11 at 12:33

jquery drop down menu with timer

4 Answers4