jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。
html
<img id="sample1" src="sample1small.jpg"> <div id="overlay"> <div id="overlayWindow"> <img src="sample.jpg"> <p>サンプル説明 サンプル説明 サンプル説明</p> </div> </div>
css
#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; }
js
jQuery("#sample1").hover(function(){ jQuery("#overlay, #overlayWindow").fadeIn(); },function(){ jQuery("#overlay, #overlayWindow").fadeOut(); } )
jQueryの部分を
js
jQuery("#sample1").mouseover(function(){ jQuery("#overlay, #overlayWindow").fadeIn(); }) jQuery("#sample1").mouseleave(function(){ jQuery("#overlay, #overlayWindow").fadeOut(); })
js
jQuery("#sample1").hover(function(){ jQuery("#overlay, #overlayWindow").stop(true,true).fadeIn(); },function(){ jQuery("#overlay, #overlayWindow").stop(true,true).fadeOut(); } )
のようにもしてみたのですが結果は同じでした。
また、試しに
js
jQuery("#sample1").hover(function(){ jQuery("#overlay, #overlayWindow").fadeIn(); })
にしたところfadeInされて消えることはありませんでした。fadeOutを付け加えるとfadeIn,fadeOutを繰り返して困っています。
解決方法をご教示ください。
まだ回答がついていません
会員登録して回答してみよう