Как исправить ошибку плавного появления на jQ?

Question

[lexstile]

Есть код html:

<div class="block__menu">
	<div class="block__menu_item">
		<span>Заголовок</span>
		<ul>
			<li><a href="#1">Тест 1</a></li>
			<li><a href="#2">Тест 2</a></li>
		</ul>
	</div>
</div>

Есть jQ:

jQuery(function($){
	$(document).ready(function(){
		$('.block__menu .block__menu_item').hover(
		function(){
		  $(this).find('ul').slideDown();
		},
		function(){
		  $(this).find('ul').slideUp();
		});
	});
});

Загвоздка в том, что если быстро навести стрелку на нужный блок несколько раз (span) и сразу же убрать ее.
Анимация происходит несколько раз при уже убранном курсоре.
Как сделать, чтобы появление было только при нахождении курсора в нужной области?

Answer 1

[Игорь]

https://jsfiddle.net/n456bjg4/

Answer 2

[Евгений]

jQuery(function($){
  $(document).ready(function(){
    $('.block__menu .block__menu_item').hover(
    function(){
      $(this).find('ul').stop().slideDown();
    },
    function(){
      $(this).find('ul').stop().slideUp();
    });
  });
});

Answer 3

[Никита]

самое простое, это:

У функции slideDown \ slideUp вторым параметром передается каллбэк функция на завершение анимации, поэтому,

на ховер добавляете класс (например актив), и на завершении функции вы его убираете.

на аут из ховера, вы чекаете класс актив ( который говорит о том то меню еще не раскрылось полностью), если он есть то ничего не делаете, если нет то скрывыаете.

Вообще такие задачи обычно через CSS делают.

jQuery(function($){
  $(document).ready(function(){
    $('.block__menu .block__menu_item').hover(
    function(){
    	$(this).addClass('active');
      	$(this).find('ul').slideDown('fast', function(){
      		$(this).removeClass('active')
      	});
    },
    function(){
    	if ($(this).hassClass('active'))  return; 
       	$(this).find('ul').slideUp();
    });
  });
});
//еще можно юзать .stop().slideUp();

Мог где то не досмотреть, но идея надеюсь ясна