children slideDown inside parent slideDown overflows the parent

Question

A have designed a two level menu using jquery. When I hover the top menu link, a DIV by class name of submenu slides down. inside this div there is a link when I hover it, The second level with class name of subsubmenu is sliding down again and causes its parent (submenu) to expand more.

This structure works fine when you act slow and normal. The problem is that when I move my mouse quick around and exit and enter to top level menu many times, the structure becomes broken for ever! I mean the expansion of subsubmenu will no more expands its parent (submenu) even you act slow and normal again.

Is this a bug (In both google chrome and firefox!)? Or do you suggest any structural modification?

$(".menuholder").on("mouseenter",function(){
var submenuid=$(this).attr("id").replace("menu","");
$(this).children("a").addClass("hover");
$(".submenu").stop().hide();
$("#submenu"+submenuid).stop().slideDown();
});

$(".menuholder").on("mouseleave",function(){
var submenuid=$(this).attr("id").replace("menu","");
$(this).children("a").removeClass("hover");
$(".submenu").stop().hide();
})

$(".subholder").on("mouseenter",function(){
$(".subsubmenu").stop().slideUp();
$(this).find(".subsubmenu").stop().slideDown();
});

$(".subholder").on("mouseleave",function(){
$(this).find(".subsubmenu").stop().slideUp();
})

.menu{
 color:#ffffff;
 display:inline-block;
 padding-right:8px;
 padding-left:8px;
 background:#dfa800;
 white-space:nowrap;
 height:35px;
 line-height:35px;
 margin-left:5px;;
 border-top-right-radius:5px;
 border-top-left-radius:5px;
}
.menu:hover,.menu.hover{
 color:#000000;
    background:#eeeeee;
}
.submenu{
 width:200px;
 position:absolute;
 top:35px;
 background:#eeeeee;
 left:20px;
 z-index:900;
 display:none;
 box-shadow:0 10px 10px #000000;
}

.subholder{
 display:inline-block;white-space:nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu7" class="menuholder" style="display: inline-block">
  <a class="menu">test</a>
  <div id="submenu7" class="submenu">
   <table style="width:100%">
    <tr>
     <td valign="top" width="100%">
      <div class="subholder">
       <ul>
        <li>test</li>
       </ul>
       <div class="subsubmenu" style="display: none;">
        <ul>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
         <li>test</li>
        </ul>
       </div>
      </div>
     </td>
    </tr>
   </table>
  </div>
 </div>

Have you tried to use `.stop(true, true)` instead of `.stop()` to stop animation immediately and to clear animation's queue? — Regent, Apr 17 '15 at 06:45
It seems working fine! in my case do you know why the structure is broken for ever?! — Ali Sheikhpour, Apr 17 '15 at 06:49
Nope, neither I inspected code narrowly nor I tested it a lot. Let's just say that if you do it in correct way, there is no need to search how something goes wrong. — Regent, Apr 17 '15 at 07:00

score 0 · Accepted Answer · answered Apr 17 '15 at 07:14

When it comes to many animations in short time, and only last one should be shown, you can use .stop(true, true) to not only stop animation, but also to complete it and to clear queue of animations.

It does help in some situations, when many animations (which are stopped on half-way) can cause weird behaviour.

children slideDown inside parent slideDown overflows the parent

1 Answers1