jQuery animate when mouse is near

Question

I have been looking for a way to make a navigation menu slide down from the top of the browser when the mouse enters the area near it and disappear when the mouse leaves the menu.

I am a lot closer thanks to this question.

The problem I am having is with the animation. It is behaving very strangely. I have emulated my code in JsFiddle to have a look at.

http://jsfiddle.net/tVreF/2/

Wait for a moment and move your mouse around the page, try resizing the window etc, and eventually it animates. Obviously this isn't the way intended.

Any advice would be greatly appreciated, as im not sure if im going about this the right way!

EDIT: Just to clear up any confusion - I mean so that the navigation menu doesnt initially appear, then the entire menu itself slides down when the mouse goes near the top of the screen. Kind of like what happens when you set your windows taskbar to "Auto hide".

Tschallacka · Accepted Answer · 2012-09-19 10:09:48Z

What I have done is changed the approach. I made a event catcher div in this fiddle:

http://jsfiddle.net/L2J5X/2/

and added event handlers when a mouse comes over that div the menu animates in, when the mouse moves out the div the menu animates out.

function dothething(amover) { if(amover) { $(".nav").animate({top: '0px'}, 200, "linear"); } else { window.setTimeout(function(){if(!$amthere){ $(".nav").animate({top: '-40px'}, 200, "linear"); }},100); } } $("#detect").mouseover(function(){dothething(true);}); $("#detect").mouseout(function(){dothething(false);}); $("#mainNav").mouseover(function(){$amthere=true;}); $("#mainNav").mouseout(function(){$amthere=false;}); $amthere = false;

The div is absolutely positioned with a top z-index so the event always gets caught. No matter what other divs do when they are placed randomly(see the great green block).

Hope this helps a bit.

* EDIT *

Added a brief delay to prevent hiding when going from catcher div to menu. That's what the $amthere variable is for, to see if we are on the menu or not. Then with a 100ms delay check if we are good to go for a real mouseout, if not do nothing, if so, hide hide menu.

I see what you mean but that link took me back to my original fiddle! (Thankyou for your time!)
I have updated the link. Forgot to update it ;-) it's good now

Tschallacka · Accepted Answer · 2012-09-19 10:07:26Z

http://sperling.com/examples/menuh/
Try this. You can animate using pure css...?

This may not be the solution you require but it is a better alternative
edit
In this situation, you can make the width of the nav(you wrote IsNear function on it) as 20px and write onhover on it rather than always checking on the body

Thanks for the quick reply but I meant so that the navigation menu doesnt initially appear, then the entire menu itself slides down when the mouse goes near the top of the screen. Kind of like what happens when you set your windows taskbar to "Auto hide".

Collectives™ on Stack Overflow

jQuery animate when mouse is near

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related