jQuery при наведении сбивается

Надеюсь, кто-нибудь поможет мне разобраться со странной проблемой, с которой я сталкиваюсь при работе с 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 и снова наведете курсор на вспомогательную навигацию до того, как она завершит закрытие, вспомогательная навигация бесконтрольно мигает и не останавливается. Без стоп-функций и просто так:

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

...просто заставляет его быстро открываться и закрываться.

Спасибо за любые советы!


jquery hover jquery-hover
person cbloss793    schedule 08.10.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Один из способов исправить это — добавить задержку при наведении:

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 */
person jsweazy    schedule 08.10.2012

arrow_upward
1
arrow_downward

Потому что без остановки (которая останавливает анимацию элемента, если он уже анимируется), он будет отображать и скрывать количество раз, когда вы наводите курсор на элемент. остановка jQuery

person Anoop    schedule 08.10.2012