jQuery hover gets confused

Question

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!

Answer 1

One way to fix this is to add a delay on the hover:

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