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>

因此，详细说明发生的事情是悬停/过度工作正常并且花花公子，直到有人用鼠标快速完成。如果你徘徊在顶部li并在完成关闭之前将鼠标悬停在subnav上，则subnav会无法控制地闪烁并且不会停止。没有停止功能，就像这样：

     $(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 */

Answer 2

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

jQuery悬停感到困惑

2 个答案: