1

Hoping someone might help me figure out the weird issue I'm having with jQuery. I have a fancy hover going on for the footer nav and it blinks whenever I hover off and then back on the subnav that hasn't finished it's transition. So here's what I got code-wise.

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

Here's the 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>

So in detail what happens is that the hover/over off works just fine and dandy until someone gets quick with the mouse. If you hover off the top li and hover back onto the subnav before it finishes closing, the subnav blinks uncontrollably and doesn't stop. Without the stop functions and it just being like this:

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

...just makes it open and close rapidly.

Thanks for any tips!

4

2 回答 2

2

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

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 */
于 2012-10-08T18:06:49.173 回答
1

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

于 2012-10-08T18:04:36.243 回答