How to stop fadeIn () blinking?

Question

I currently have a simple div that I want to fade when I hover over another div, but it will flash 3 times.

I read some other questions, and I think this is related to how my code is structured. But I'm not sure how to fix mine, as it is so basic already.

Here are my codes:

<script type="text/javascript"> $(document).ready(function(){ $('.content .guide ul.guide li .event').mouseover(function(){ $(this).find('.info').fadeIn(); }); $('.content .guide ul.guide li .event').mouseout(function(){ $(this).find('.info').fadeOut(); }); }); </script> 

CSS

 .content .guide ul.guide li .event .info {display:none;} 

HTML

 <ul class="guide"> <li class="mon"> <div class="day">Monday</div> <div class="session-1 event"> <time>7:30am</time> <span>Ep 5: <a href="">Lorem</a></span> <div class="info"> <div class="tooltip"></div> <div class="wrap"> <div class="desc">Ep 8: Lorem ipsum</div> </div> </div> </div> <div class="session-2 event"> <time>8:30pm</time> <span>Ep 5: <a href="">Lorem</a></span> <div class="info"> <div class="tooltip"></div> <div class="wrap"> <div class="desc">Ep 8: Lorem ipsum</div> </div> </div> </div> </li> <li class="tue"> <div class="day">Tuesday</div> <div class="session-1"> </div> <div class="session-2"> </div> </li> </ul> 

Answer 1

You can use stop().fadeTo() to prevent this. Below is the code and demo here

 <script type="text/javascript"> $(document).ready(function(){ $('.content .guide ul.guide li .event').mouseover(function(){ $(this).find('.info').stop().fadeTo('slow',1); }); $('.content .guide ul.guide li .event').mouseout(function(){ $(this).find('.info').stop().fadeTo('slow',0); }); }); </script> 

Answer 2

I have this problem only on Google Chrome. Changed .fadeIn to .fadeTo (myDuration, 1). For me, everything works fine without ".stop ()".

Answer 3

I had this and it solved my problem (I used fadeIn and fadeOut)

 $( "#board" ).stop().animate({ "opacity": 1 },300); 

Answer 4

An old question, but I wanted to add my conclusions after dealing with this problem, in case they are useful to everyone who is faced with this issue.

When using stop (). fadeIn () it just pauses the action until the next one starts.

Instead of stop (), I tried to end (). fadeIn () and finish (). fadeOut (). It worked a lot better. The current current animation ends immediately, and the current run.

In the above example, this would be:

 <script type="text/javascript"> $(document).ready(function(){ $('.content .guide ul.guide li .event').mouseover(function(){ $(this).find('.info').finish().fadeTo('slow',1); }); $('.content .guide ul.guide li .event').mouseout(function(){ $(this).find('.info').finish().fadeTo('slow',0); }); }); </script>