Raptor Raptor - 3 years ago 299
jQuery Question

jQuery : slideDown() , slideUp() and stop()

I have a menu strip . I planned to :

  1. slideDown()
    a submenu ( originally
    display: none
    DIV ) when I mouse over the menu strip

  2. hide the submenu by
    when mouse out.

Here is the codes:

<div id="main_menu" onmouseover="$('#submenu').stop(true,false).slideDown();" onmouseout="$('#submenu').stop(true,false).slideUp();">Main Menu</div>
<div id="submenu" style="display: none">Some submenu contents here</div>

What I try to achieve is, when I mouseover submenu´╝îthe submenu holds and stop the mouse out ( the
animation. How can I achieve it ?

Note: given that the main_menu and sub_menu did not overlap.

UPDATE: here is the the jsFiddle

Answer Source

An easy way you can do is adding a parent dom, and binding the mouse event to it.


<div id="menu">
    <div id="main_menu">Main Menu</div>
    <div id="submenu" style="display: none">Some submenu contents here</div>


$('#menu').hover(function () {
    $('#submenu').stop(true, false).slideDown();

function () {
    $('#submenu').stop(true, false).slideUp();

here is jsfiddle demo. http://jsfiddle.net/vyDVd/


If you don't want to adding a parent dom, you can try putting submenu into main_menu as a child menu.

I update your jsfiddle demo here http://jsfiddle.net/9KfYr/2/

I add 2 css attributes to #submenu to keep UI unchange.


And here, I suggest use .hover() provided by jQuery.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download