Jquery submenu, hover in/out animation problem

Question

I'm making a menu in jquery. You can see it at http://mywash.dk/testtest/index.html

The submenu that is shown from the start (below 'Hvordan') is the active menu so it should always be shown (unless you hover on another menu-item in which case another submenu should show.

It's working okay but has 1 annoying bug. When you hover from 'Hvad' to 'Hvem' it quickly display and hides the active menu before showing the menu it is supposed to.

Any idea why this is the case?

Thanks so much for your help!

Jquery:

$(document).ready(function() {

    $('#menu > ul > li:not(.inpath) ul').hide();
    $('#menu .inpath ul').show();
    $('#menu > ul > li:not(.inpath)').hover(
    function() {
        $('ul', this).show("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){
          $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400);
        }


    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);

        if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){
            $('#menu li.inpath ul').show("slide", { direction: "left" }, 400);
        }
    });
});

Html:

<div id="menu">

            <ul>

                <li class="test"><a href="">Hvem</a>
                <ul>
                    <li class="first-item"><a href="index.html">Submenu</a></li>
                    </ul>
                </li>
                <li class="test"><a href="">Hvad</a>
                    <ul>
                    <li class="first-item"><a href="index.html">Produkter</a></li>
                    <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
                    </ul>
                </li>

                <li class="inpath test"><a href="">Hvordan</a>

                    <ul>

                        <li class="first-item"><a href="">Reklame</a></li>
                        <li><a href="">PR</a></li>
                        <li><a href="">Websites</a></li>
                        <li><a href="">Illustrationer</a></li>

                    </ul>

                </li>
                <li class="last-item test"><a href="">Sådan!</a></li>

            </ul>

            <div class="clear"><!--clearfix--></div>

        </div>

.stop() is not a good solution. It might stop mid animation and just look really wierd. Using the .filter(':not(:animated)').show() is a bit more foolproof but still not totally solid. — Millenjo
– Millenjo, Commented Jun 26, 2013 at 11:20

Community · Accepted Answer · 2017-05-23 12:04:12Z

1

Your problem is caused by the immediate calling of the hover action when you leave or enter a menu element.

hoverIntent plugin is one possible fix to your problem

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

Notice on the second demo block you can skip from the first to third block with out triggering the second blocks action even when mousing over it.

edit:

<script type="text/javascript">
$(document).ready(function() {
    $('.default').show()
    $('#menu .menuitem').hover(
    function() {
        $('.banner').each(function() {
            $(this).stop(true,true).hide();
        })
        $('ul', this).show("slide", { direction: "left" }, 400);
    }, function() {
        $('ul', this).hide("slide", { direction: "left" }, 400);
        $('.default').delay(500).show("slide", { direction: "left" }, 400);
    });
});
</script>

I added a default and changed some class names around a bit, which wasn't really necessary, but i think you can figure it out.

<div id="menu">
    <ul>
        <li class="menuitem"><a href="">Hvem</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Submenu</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvad</a>
            <ul class="banner">
                <li class="first-item"><a href="index.html">Produkter</a></li>
                <li class="activeitem"><a href="cases.html" >Leveringer</a></li>
            </ul>
        </li>

        <li class="menuitem"><a href="">Hvordan</a>
            <ul class="banner default">
                <li class="first-item"><a href="">Reklame</a></li>
                <li><a href="">PR</a></li>
                <li><a href="">Websites</a></li>
                <li><a href="">Illustrationer</a></li>
            </ul>
        </li>
        <li class="menuitem"><a href="">Sådan!</a></li>
    </ul>
    <div class="clear"><!--clearfix--></div> 
</div>

Jquery submenu, hover in/out animation problem

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Mar 11, 2011 at 9:04

dting

39.4k10 gold badges98 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hemil Over a year ago

Hey, thanks so much for your help :-) I think the problem is, that i execute $('#menu li.inpath ul').show("slide", { direction: "left" }, 400); when i hover out. HoverIntent does a nice job and i have implementet it on the site. But it doesn't fix the problem. Is there a way that i can get about not executing the if i hover from one menu-item to another?

Hemil Over a year ago

Awesome :-) This is really doing my head in :P

Collectives™ on Stack Overflow

Jquery submenu, hover in/out animation problem

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related