How to stop fadeIn() blinking?

Question

Currently I have a simple div that I want to have fade in on mouseover of another div, but it would blink 3 times.

I've read some of the other questions and I think this has to do with how my code is structured. But I'm not sure how to correct mine as it's 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>

Not related to the problem, but note that you should chain your `mouseover` and `mouseout` methods to avoid creating the same jQuery object twice: `$('.content .guide ul.guide li .event').mouseover(function(){ ... }).mouseout(function() { ... });` — nnnnnn, Jun 05 '12 at 02:30

score 24 · Accepted Answer · edited Jan 06 '13 at 21:36

24

You can use stop().fadeTo() to prevent that. See below 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>

edited Jan 06 '13 at 21:36

Leniel Maccaferri

100,159
46
371
480

answered Jun 05 '12 at 02:25

Dips

3,220
3
20
21

2

Just to note that `fadeTo` is nothing special, and all the magic is in `stop`: `.stop().fadeIn()` and `.stop().fadeOut()` work as well. – Amadan Jun 05 '12 at 02:25
2

I was about to give the same answer. Here's the fiddle I created for it: http://jsfiddle.net/MnwTN/ Note that you may want `.stop(true,true)` (otherwise, depending on how you manoeuvre the mouse, you may end up with the element faded out even though you're still over it). I'd give you a +1 if you explained _why_ this fixes things... – nnnnnn Jun 05 '12 at 02:28
@nnnnnn the first 'true' clears the animation queue and the second 'true' jumps to the end of the current animation. http://api.jquery.com/stop/ – Jargs Feb 01 '14 at 00:36
@Jeff - yes, I know. I meant I'd upvote the answer if Dips added a more detailed explanation. – nnnnnn Feb 01 '14 at 05:22

it3xl · Answer 2 · 2018-11-28T10:01:56.330

8

I only got this problem in Google Chrome.

I've changed .fadeIn to .fadeTo(myDuration,1) to fix it.

Also, for me, everything works fine without .stop().

edited Nov 28 '18 at 10:01

answered Feb 18 '13 at 21:56

it3xl

2,372
27
37

score 4 · Answer 3 · answered Feb 20 '15 at 13:32

4

I had this and this solved my problem ( I was using fadeIn and fadeOut)

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

answered Feb 20 '15 at 13:32

Mikeys4u

1,494
18
26

score 0 · Answer 4 · answered Dec 29 '13 at 22:22

Old question, but I wanted to add my findings after fighting this problem, in case they are helpful to anyone who stumbles across this question.

When using stop().fadeIn(), it would simply pause the action, until the next one is triggered.

Instead of stop(), I then tried finish().fadeIn(), and finish().fadeOut(). This worked much better. The currently ongoing animation is finished immediately, and the current is started.

For the above example, it 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>

How to stop fadeIn() blinking?

4 Answers4

Linked