jquery子菜单，悬停进/出动画问题

Question

我正在jquery中制作菜单。你可以看到它在http://mywash.dk/testtest/index.html

子菜单是从一开始（下面的“Hvordan”）显示的是活动的菜单，所以应该始终显示（除非你悬停在另一个菜单项在这种情况下，另一个子菜单应显示。

它的工作不错，但有1级恼人的错误。当你从“Hvad”悬停“HVEM”它快速显示出它应该是菜单之前隐藏活动菜单。

知道为什么这是这样吗？

非常感谢您的帮助！

的Jquery：

$(document).ready(function() { 

    $('#menu > ul > li:not(.inpath) ul').hide(); 
    $('#menu .inpath ul').show(); 
    $('#menu > ul > li:not(.inpath)').hover(
    function() { 
     $('ul', this).show("slide", { direction: "left" }, 400); 

     if($('#menu li.inpath ul').is(':visible') && $(this).not('#menu ul li')){ 
      $('#menu li.inpath ul').hide("slide", { direction: "left" }, 400); 
     } 


    }, function() { 
     $('ul', this).hide("slide", { direction: "left" }, 400); 

     if($('#menu li.inpath ul').is(':hidden') && $(this).not('#menu ul li')){ 
      $('#menu li.inpath ul').show("slide", { direction: "left" }, 400); 
     } 
    }); 
}); 

HTML：

<div id="menu"> 

      <ul> 

       <li class="test"><a href="">Hvem</a> 
       <ul> 
        <li class="first-item"><a href="index.html">Submenu</a></li> 
        </ul> 
       </li> 
       <li class="test"><a href="">Hvad</a> 
        <ul> 
        <li class="first-item"><a href="index.html">Produkter</a></li> 
        <li class="activeitem"><a href="cases.html" >Leveringer</a></li> 
        </ul> 
       </li> 

       <li class="inpath test"><a href="">Hvordan</a> 

        <ul> 

         <li class="first-item"><a href="">Reklame</a></li> 
         <li><a href="">PR</a></li> 
         <li><a href="">Websites</a></li> 
         <li><a href="">Illustrationer</a></li> 

        </ul> 

       </li> 
       <li class="last-item test"><a href="">Sådan!</a></li> 

      </ul> 

      <div class="clear"><!--clearfix--></div> 

     </div> 

Answer 1

你的问题是，当你离开或进入菜单元素的悬停动作的直接调用引起的。

hoverIntent插件是一个可能的修复您的问题，第二个演示块你可以出去，甚至引发了第二块动作鼠标悬停时，从第一到第三块跳过

http://cherne.net/brian/resources/jquery.hoverIntent.html

通知。

编辑：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.default').show() 
    $('#menu .menuitem').hover(
    function() { 
     $('.banner').each(function() { 
      $(this).stop(true,true).hide(); 
     }) 
     $('ul', this).show("slide", { direction: "left" }, 400); 
    }, function() { 
     $('ul', this).hide("slide", { direction: "left" }, 400); 
     $('.default').delay(500).show("slide", { direction: "left" }, 400); 
    }); 
}); 
</script> 

我添加了一个默认的，改变了一下周围的一些类的名字，这是不是真的有必要，但我想你自己看着办吧。

<div id="menu"> 
    <ul> 
     <li class="menuitem"><a href="">Hvem</a> 
      <ul class="banner"> 
       <li class="first-item"><a href="index.html">Submenu</a></li> 
      </ul> 
     </li> 

     <li class="menuitem"><a href="">Hvad</a> 
      <ul class="banner"> 
       <li class="first-item"><a href="index.html">Produkter</a></li> 
       <li class="activeitem"><a href="cases.html" >Leveringer</a></li> 
      </ul> 
     </li> 

     <li class="menuitem"><a href="">Hvordan</a> 
      <ul class="banner default"> 
       <li class="first-item"><a href="">Reklame</a></li> 
       <li><a href="">PR</a></li> 
       <li><a href="">Websites</a></li> 
       <li><a href="">Illustrationer</a></li> 
      </ul> 
     </li> 
     <li class="menuitem"><a href="">Sådan!</a></li> 
    </ul> 
    <div class="clear"><!--clearfix--></div> 
</div> 

Jquery submenu, hover in/out animation problem