CODEWITHSUNDEEP
jquerydrop-down-menuhoverhoverintent
M0N0NE
M0N0NE

Reputation: 63

Why HoverIntent is not working?

I'm trying to make a dropdown menu, but I have some problems with the hoverIntent instruction.

Javascript code:

$('li.dropdown').hoverIntent(
    function() {
        $(this).find('ul.submenu').slideDown();
    },
    function() {
        $(this).find('ul.submenu').slideUp();
    }
);

HTML code:

<div id="div_menu">    
      <ul class="menu"> 
           <li class="leaf"><a href="#" style="color:#2154A3;">Inici</a></li> 
           <li class="dropdown"> 
                <a href="#">Facultats</a> 
                <ul class="submenu">
                    <li style="margin:3px; border:none;"></li>
                    <li><a href="#">IQS</a></li> 
                    <li><a href="#">UIC</a></li> 
                    <li><a href="#">UPF</a></li> 
                    <li><a href="#">ESCI</a></li>
                </ul>
           </li> 
           <li class="leaf"><a href="./instalaciones.html">Instal·lacions</a></li> 
           <li><a href="">Contacte</a></li>  
     </ul>
</div>

CSS code:

.leaf {
    border-right: solid 1px #333;
}

.dropdown {
    border-right: solid 1px #333;
}

With the hover function it works correctly, but if I put the mouse ove the "li" it makes the slideDown correctly, but if after that I move the mouse out and enter again and leave again it will stay sliding up and down. It look like if there were a stack adding every event it happend!

Upvotes: 1

Views: 526

Answers (1)

mdup
mdup

Reputation: 8559

As proposed in the example of http://api.jquery.com/hover/, you can use jQuery's stop() to make sure extra animation you wouldn't want will not be executed.

$('ul.submenu').slideUp(); /* Hide your menu when the page gets loaded */

$('li.dropdown').hover(
    function() {
       $('ul.submenu').stop(true, false).slideToggle();
    }
);

The first argument (true) clears the queue, the second argument (false) stops the current animation right now.

Upvotes: 1

Related Questions