preventing menu item from re-firing once inside

Question

upon entering my menu item my hidden div rolls down nicely then recoils if you leave. the problem is if you are already mousing around the container then RE-enter the menu item up top it unfortunately re-fires and slides the hidden container down again like this:

http://jsfiddle.net/NAyWQ/17/

so what I'm trying to do is test to see if the item is already visible, if it is simply keep showing the container.

close as I can get to that is this:

http://jsfiddle.net/NAyWQ/18/

any help is greatly appreciated.

Are you sure you want to do a hover state menu like that? It's not going to work so well on touch-screens. — Drew Baker, Feb 13 '12 at 20:10
This was answered here already: http://stackoverflow.com/questions/2360209/cancel-all-queued-jquery-slideup-and-slidedown-animations — Drew Baker, Feb 13 '12 at 20:12
@DrewBaker. thanks for pointing that out. I think so, this is for a site targeted mainly at non-mobile users. curious though, what would be a good fall back? check to see if it's a mobile device, then make the drop downs clickable? — lyndonr, Feb 14 '12 at 14:47
and thank you for that link.. missed that one. I was searching on stop instead of cancel. — lyndonr, Feb 14 '12 at 14:48

score 0 · Answer 1 · answered Feb 13 '12 at 20:16

This works:

http://jsfiddle.net/DLFm3/

html:

<div id="container">
    <div id="header">
        <div id="boundary"></div>
        <div id="menu">
            <div id="about">
                 <div id="dd_about"></div>
            </div> 
        </div>
    </div>
</div>

javascript

var menustate = "hidden";

$('#about').bind('mouseenter', function() {       

    if (menustate == "hidden")
    {
        $('#dd_about').slideDown('fast');
        menustate = "shown";
    }
});


$('#about').bind('mouseleave', function () {
      $('#dd_about').slideUp('fast');
    menustate = "hidden";
});

css

#container {
    width:500px;
    margin:0 auto;
    position:relative;    
}

#header {
    width:100%;
    height:50px;
    background:blue;
    position:relative;
}

#boundary {
    width:320px;
    height:60px;
    bottom:0;
    right:0;
    position:absolute;
    background:purple;

}

#menu {
     width:100px;
     height:40px;
     position:absolute;
     right:10px;
     top:10px;   
}

#about {
    width:100px;
    height:40px;
    float:left;
    background:yellow;

 }

#dd_about  {
   top : 40px;
   left : 0px;
   width:100px;
   height:200px;
   position:absolute; 
   background:red;
   display:none;
} 

#dd_about {right:10px}

as does this:

http://jsfiddle.net/DLFm3/1/

with this javascript

$('#about').bind('mouseenter', function() {       

        $('#dd_about').slideDown('fast');
});


$('#about').bind('mouseleave', function () {
      $('#dd_about').slideUp('fast');
});

score 0 · Accepted Answer · answered Feb 13 '12 at 20:20

0

To solve the way you have it setup check it out here jsfiddle. Also Hogan gave you a good answer if you want the dropdwon menus contained within the main menu. Otherwise I just added a stop(true, true) call on the #dd_about to make the animation stop.

answered Feb 13 '12 at 20:20

Henesnarfel

2,129
1
16
18

ahah.. you've got to stop the function already working on the container before it will listen to the css change command. that's the bit I was missing. thanks very much. – lyndonr Feb 14 '12 at 14:42

score 0 · Answer 3 · answered Feb 13 '12 at 20:20

Here is working demo http://jsfiddle.net/NAyWQ/21/

This example uses flag variable to check current hover state

var hover = false;

$('#about').bind('mouseenter', function() {      
    hover = true;
    $('#dd_about').slideDown('fast');
});

$('#boundary').bind('mouseenter', function () {
    hover = false;
    $('#dd_about').slideUp('fast');
});

$('#dd_about').bind('mouseleave', function () {
    hover = false;
    setTimeout(function() {
        if (hover) return false; 
        $('#dd_about').slideUp('fast');
    }, 50);
});

thanks @dfsq I was trying a solution like that initially. works as well. — lyndonr, Feb 14 '12 at 14:50

preventing menu item from re-firing once inside

3 Answers3