StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODiv not being displayed when hover quickly and using .hover() jQuery
text
Body
copied!<p>I have a horizontal navigation with a 1px high div under as default. When I hover over a menu item I hide this 1px div and instead show another div with height based on the number of subsites for the menu item I hover over. When I leave a menu item I want to hide the new div and instead display the 1px div again. My issue is that if I quickly hover over an item and leave immediately the 1px div is not displayed, but if I do it slowly (like 0.5 sec) it does.</p> <p>What in the script below can cause <code>#CustomNavBottomBorder</code> to not be displayed if I hover/leave <code>li.dynamic-children</code> quickly?</p> <pre><code>$('#CustomNav').mouseleave(function() { $('#CustomNavBottomBorder').fadeIn('slow'); }); $('li.dynamic-children').hover(function() { var itemHeight = 32; // height in pixels per item var divHeight; // Calculate height of div based on number of menu items var $menuItems = $(this).find('ul').children(); var numberOfMenuItems = $menuItems.length; window.setTimeout(function() {$('#CustomNavBottomBorder').hide();}, 250); $menuItems.each(function() {$(this).hide().delay(520).show(10);}); divHeight = itemHeight * numberOfMenuItems; $('#DropdownMenuBox').stop(true,true).animate({height: divHeight + "px"}).slideDown(300); }, function() { $('#DropdownMenuBox').stop(true,true).delay(400).slideUp(500); window.setTimeout(function() {$('#CustomNavBottomBorder').removeClass('customNavOn');}, 800); } ); .customNavOn { display:none; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload