CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dan Mason
Dan Mason

Reputation: 121

jQuery animate when mouse is near

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".

Upvotes: 1

Views: 1014

Answers (2)

Tschallacka
Tschallacka

Reputation: 28722

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.

Upvotes: 1

Navaneeth
Navaneeth

Reputation: 2584

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

Upvotes: 1

Related Questions