jQuery on hover animation срабатывает несколько раз

Question

Я пытаюсь понять, почему моя функция зависания действует странно. Когда вы наводите курсор на div, другой div становится видимым. Однако, когда я перемещаю свой курсор вниз на div, который становится видимым, он исчезает и снова исчезает. Это не должно происходить и должно оставаться видимым, пока мой курсор не покинет основной контейнер.

Вот мой код.

HTML

<div id="searchWrapper" class="fleft"> 
    <div class="box">Hover here!</div> 
    <div class="searchLinks" style="display: none;"> 
     <form id="search_mini_form" action="" method="get"> 
      <div class="form-search"> 
       <label for="search">Search:</label> 
       <input id="search" type="text" name="q" value="" class="input-text" maxlength="128" autocomplete="off"> 
       <button type="submit" title="Search" class="button"><span><span>Search</span></span></button> 
       <div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div> 
       <script type="text/javascript"> 
        //<![CDATA[ 
        var searchForm = new Varien.searchForm('search_mini_form', 'search', ''); 
        searchForm.initAutocomplete('http://removed.com/index.php/catalogsearch/ajax/suggest/', 'search_autocomplete'); 
        //]]> 
       </script> 
      </div> 
     </form> 
    </div> 
</div> 

JQuery

<script type="text/javascript"> 
    jQuery(function($) { 

     $("#searchWrapper").hover(
      function() { 
       $(".searchLinks").fadeIn(500); 
      }, 
      function() { 
       $(".searchLinks").fadeOut(500); 
      } 
     ); 

    }); 
</script> 

CSS

#searchWrapper { 
    position:relative; 
} 

#searchWrapper .searchLinks { 
    position: absolute; 
    z-index: 99999; 
    top: 50px; 
    background: #e7e7e7; 
    right: -145px; 
    display:none; 
    padding:10px; 
} 

#searchWrapper .box { 
    border:solid 1px #555; 
    padding: 20px 0px; 
    text-align:center; 
} 

Здесь можно увидеть, как она исчезает в и затем исчезает и возвращается назад, когда вы наводите на него курсор.

http://jsfiddle.net/421g2cdh/7/

Answer 1

Вы должны использовать функцию stop().

jQuery(function($) { 

    $("#searchWrapper").hover(
     function() { 
      $(".searchLinks").stop(true,true).fadeIn(500); 
     }, 
     function() { 
      $(".searchLinks").stop(true,true).fadeOut(500); 
     } 
    ); 

}); 

Кроме того, уменьшить запас .searchLinks, если вы не хотите, чтобы он FADEOUT, когда мышь находится между ним и его родителями. (Обивка-топ, а не сверху)

(см http://jsfiddle.net/421g2cdh/11/)

Answer 2

Каждый раз, когда вы нависли элемент вы должны остановить текущий запущенную анимацию на соответствующих элементах.

Использование stop()

Try:

jQuery(function($) { 

     $("#searchWrapper").hover(
      function() { 
       $(".searchLinks").stop().fadeIn(500); 
      }, 
      function() { 
       $(".searchLinks").stop().fadeOut(500); 
      } 
     ); 

    }); 

DEMO

Answer 3

Использование stop() и вы могли бы использовать в/из парения обработчика метод как это:

jQuery(function ($) { 
    $("#searchWrapper").hover(
    function() { 
     $(".searchLinks").stop().fadeToggle(500); 
    }); 
}); 

jsFiddle

fadeToggle()

Answer 4

Ничего из вышеперечисленного не работал для меня, но я нашел решение, которое срабатывает только один раз, используя .unbind():

$("#sidebar").unbind().on('mouseenter', function() { 
    console.log('mouse entered sidebar'); 
});