実行した回数分イベントが実行されるのを阻止したい

Question

[困っていること]
jQueryでhoverイベントを実装したのですが、通過すればするだけ処理が行われてしまいます。

[やりたいこと]
hoverするたびにイベントが発生するのではなく、一度処理が終わるまでは何度hoverしても処理は一回。
処理が終わり次第再びhoverした時にまた実行されるようにしたい。

よろしくお願いいたします。

       <header>
			<ul class="header-menu">
				<li>
					<a href="#morning" class="menu-btn">
						MORNING
					</a>
				</li>
				<li>
					<a href="#lunch" class="menu-btn">
						LUNCH
					</a>
				</li>
				<li>
					<a href="#dinner" class="menu-btn">
						DINNER
					</a>
				</li>
				<li>
					<a href="#about" class="menu-btn">
						ABOUT
					</a>
				</li>
			</ul>
	
			<ul class="text-container">
				<li class="menu-text">
					モーニング
				</li>
				<li class="menu-text">
					ランチ
				</li>
				<li class="menu-text">
					ディナー 
				</li>
				<li class="menu-text">
					アバウト
				</li>
			</ul>

			
        </header>

$(function(){
	
	$('.menu-btn').hover(function(){
		var position = $('.menu-btn').index($(this));
		$('.menu-text').eq(position).fadeIn(1000);
	},function(){
		var position = $('.menu-btn').index($(this));
		$('.menu-text').eq(position).fadeOut(1000);
	});
	
});

Answer 1

希望される動作がいまいち伝わってきませんが
stop処理を入れていみてはどうでしょうか？

$('.menu-text').eq(position).stop().fadeIn(1000);

※fadeOutも同様

Comments

[mi...]

ありがとうございます！
無事に解決できました！！