jQuery悬停变得困惑

Posted 2023-05-08

【中文标题】jQuery悬停变得困惑

【英文标题】：jQuery hover gets confused

【发布时间】：2012-09-29 00:24:26

【问题描述】：

希望有人可以帮助我找出我在使用 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>

所以详细地说，悬停/悬停关闭工作得很好，而且花花公子，直到有人快速使用鼠标。如果您将鼠标悬停在顶部 li 上并在其完成关闭之前将鼠标悬停在 subnav 上，则 subnav 会不受控制地闪烁并且不会停止。没有停止功能，它就像这样：

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

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

感谢您的任何提示！

【参考方案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 */

【参考方案2】：

因为没有停止（如果元素已经动画则停止动画），它将绑定显示和隐藏您悬停在元素上的次数。 jQuery stop