Have Geek Brain

JQuery $ .hover is used for submenu causing "bouncing"

I am having problems with the jQuery hover method.

Here is the corresponding JavaScript code:

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

Here's the relevant HTML:

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

Whenever you hover over a top-level item, the submenu (if any) in it will drop out with a nice quick slide effect. The problem is that you quickly hover "over" the menu and hold the mouse where the menu will be, but has not yet reached: the menu will show the "end" of the mouse animation and go back to the hidden state, and repeat until you don't remove the mouse from where the drop down menu will be.

0


a source to share


2 answers


Maybe adding a check to the function mouseout

can help:



if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}
+5


a source


You can try using hoventIntent, a jQuery plugin that helps with detecting user intent hovering over elements.

http://cherne.net/brian/resources/jquery.hoverIntent.html

I changed your example with it and it seems to behave much better. I added:

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>


and changed one line with the hover () function:

$("#navigation > li").hoverIntent(

I couldn't get it to bounce and it was more like a popup menu with a hoverIntent app.

Finally, you can try using one of the out-of-the-box jQuery menu plugins as they did all the hard work for you :)

0


a source






More articles:


All Articles