StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This should address what you are asking for:</p> <pre><code>$('#head').mouseleave(function() { $(this).find('li ul').each(function () { $(this).stop().slideUp('slow'); }); }); $("ul li").mouseenter(function() { $(this).children('ul').stop().slideDown('slow'); }); </code></pre> <p><strong>Fiddle</strong></p> <p><a href="http://jsfiddle.net/zkhVC/9/" rel="nofollow">Here</a></p> <p><strong>Explanation</strong></p> <ul> <li>Do not use <code>hover</code> event, because it will get fired over and over again you are over the element. You want to use <code>mouseenter</code> instead.</li> <li>Use <code>mouseleave</code> instead of <code>mouseout</code>:</li> </ul> <blockquote> <p>The <code>mouseleave</code>event differs from <code>mouseout</code>in the way it handles event bubbling. If <code>mouseout</code> were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The <code>mouseleave</code>event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.</p> </blockquote> <ul> <li>Take a deeper look at how selectors works: you do not need of the <code>children</code> function here.</li> <li>You want to use the <code>stop</code> function before calling an animation to prevent animations buffering.</li> </ul>

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