jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。

Question

jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。

<img id="sample1" src="sample1small.jpg">
<div id="overlay">
    <div id="overlayWindow">
      <img src="sample.jpg">
      <p>サンプル説明　サンプル説明　サンプル説明</p>
    </div>
</div>

#overlay {
	display:none;
　　width: 100%;
　　height: 100%;
　　position: fixed;
　　top: 0;
　　left: 0;
　　background: rgba(99, 99, 99, 0.3);	
　　z-index: 998;
}

#overlayWindow {
	display:none;
	width: 30%;
　　height: 30%;
　　margin: 100px auto;
　　border: 2px solid #FFFFFF;
　　background-color: #FFFFFF;
　　text-align: center;	
　　z-index: 999;
} 

jQuery("#sample1").hover(function(){
	jQuery("#overlay, #overlayWindow").fadeIn();	
	},function(){
	jQuery("#overlay, #overlayWindow").fadeOut();
}
)

jQueryの部分を

jQuery("#sample1").mouseover(function(){
	jQuery("#overlay, #overlayWindow").fadeIn();	
})
jQuery("#sample1").mouseleave(function(){
	jQuery("#overlay, #overlayWindow").fadeOut();	
})

jQuery("#sample1").hover(function(){
	jQuery("#overlay, #overlayWindow").stop(true,true).fadeIn();	
	},function(){
	jQuery("#overlay, #overlayWindow").stop(true,true).fadeOut();
}
)

のようにもしてみたのですが結果は同じでした。
また、試しに

jQuery("#sample1").hover(function(){
	jQuery("#overlay, #overlayWindow").fadeIn();	
})

にしたところfadeInされて消えることはありませんでした。fadeOutを付け加えるとfadeIn,fadeOutを繰り返して困っています。
解決方法をご教示ください。