Javascript - Delay animate upon mouseleave

Question

I'm using a simply Javascript that makes a menu slide out upon mouseenter then slide in upon mouseleave. However, when the mouseleaves the area, I would like the menu to remain in place for a few seconds and then slide in.

This is the code im using.

$('#nav').mouseleave(function()
    {
            $("#nav").animate({"left": "0"}, "1000");
            $("#nav li a").css({ opacity: 0.7 });
            $("#nav li.current a").css({ opacity: 1 });
});

I've search stack overflow and google, but haven't been able to get any of the solutions to work. I'm only new to JS

Any ideas?

possible duplicate of [.mouseleave() with .delay() working together](http://stackoverflow.com/questions/6255821/mouseleave-with-delay-working-together) — Michael Berkowski, Jun 22 '12 at 02:25
check the delay function [http://api.jquery.com/delay/](http://api.jquery.com/delay/) — NullPoiиteя, Jun 22 '12 at 02:29

score 1 · Answer 1 · answered Jun 22 '12 at 02:36

Slightly better, if you hover again, before the animation is executed:

$('#nav').hover(function () {
    clearTimeout(this.timer);
}, function () {
    this.timer = setTimeout(function () {
        $("#nav").animate({"left": "100"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });
    }, 1000);
});

score 0 · Answer 2 · answered Jun 22 '12 at 02:25

0

Use the .delay() function from the JQuery API: http://api.jquery.com/delay/

$("#nav").delay(3000).animate({"left": "0"}, "1000");

This waits 3000 milliseconds(3 seconds) before calling animate()

answered Jun 22 '12 at 02:25

Hunter McMillen

59,865
24
119
170

score 0 · Accepted Answer · answered Jun 22 '12 at 02:26

0

I'm a pretty big fan of the setTimeout() method.

http://www.w3schools.com/jsref/met_win_settimeout.asp

So I would do

$('#nav').mouseleave(function()
{
        setTimeout( function(){
        $("#nav").animate({"left": "0"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });},1000)
});

answered Jun 22 '12 at 02:26

Aaron Miler

869
11
22

w3schools is not a good option because it does not provide complete information – NullPoiиteя Jun 22 '12 at 02:28
Thanks Aaron, this code worked perfectly and was simple to understand. – user1473708 Jun 22 '12 at 03:46

Javascript - Delay animate upon mouseleave

3 Answers3