Повторяется анимация появления блока при попадании курсора на другой блок. Что исправить в коде?

Question

[ended]

Есть вот такая часть страницы

<aside id="column-left">
		<div class="cats">
			<div class="content-cats">
 				<div class="description-cats">
 					Выпадающй текст
 				</div>
			</div> 
</div>
</aside>

$("#column-left").on('mouseover','.cats', function(){
	$(this).children().children('.description-cats').fadeIn(700)
									.animate({
						  			height: '60px',
						  			opacity: '1'
						 		 }, 700)})
		  		 .on('mouseout','.cats', function(){
	$(this).children().children('.description-cats').fadeOut(700)
									.stop().animate({
						  			height: '0',
						  			opacity: '0'
						 		 }, 700);});

Если курсор стоит так, что на него попадает выпадающий блок, то анимация повторяется. Мне нужно, чтобы она продолжилась. Я начинающий, камнями не кидать.

Comments

[ended]

Если курсор не попадает на анимацию блока, то все работает, как нужно

Answer 1

[RAX7]

Поменяй mouseover/mouseout на mouseenter/mouseleave.
https://learn.javascript.ru/mousemove-mouseover-mo...