jQuery 悬停变得困惑

Question

希望有人能帮助我解决我在使用 jQuery 时遇到的奇怪问题。我对页脚导航进行了一个奇特的悬停，每当我悬停然后返回尚未完成转换的子导航时，它就会闪烁。这就是我得到的代码。

jQuery:

   if($('#ft_navi .nav').length > 0){
    $('#ft_navi .nav ul').css('display', 'none'); /* if user doesn't have JS enabled, it will show everything for the customer */

    $("#ft_navi .nav > li").hover(function() {
        $(this).find('ul').stop(true, true).show('slow');
    }, 
    function(){
        $(this).find('ul').stop(true, true).hide('slow');
    }); //end of hover
} /* end of footer */ 

这是 HTML:

    <ul class="nav">
          <li class="">
             <a href="">Automotive</a>
             <ul>
                <li class=""><a href="">Overview</a></li>
                <li class=""><a href="">Credit</a></li>
             </ul>
          </li>
    </ul>

详细来说，悬停/悬停效果很好，直到有人快速使用鼠标。如果您将鼠标悬停在顶部菜单上，然后在子导航完成关闭之前将其悬停回子导航上，则子导航将不受控制地闪烁并且不会停止。没有停止功能，它就像这样:

     $(this).find('ul').show('slow');

...只是让它快速打开和关闭。

感谢您的任何提示!

Answer 1

解决此问题的一种方法是在悬停时添加延迟:

http://jsbin.com/obenec/1/

if($('#ft_navi .nav').length > 0){
  $('#ft_navi .nav ul').css('display', 'none'); /* if user doesn't have JS enabled, it will show everything for the customer */

  $("#ft_navi .nav > li").hover(function() {
    $(this).find('ul').stop(true,true).delay(300).show('slow');
  }, 
  function(){
    $(this).find('ul').stop(true,true).delay(300).hide('slow');
  }); //end of hover
} /* end of footer */