Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to stop fadeIn() blinking?

Tags:

jquery

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>
like image 532
muudless Avatar asked Jun 05 '12 02:06

muudless


3 Answers

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>
like image 79
Dips Avatar answered Nov 13 '22 17:11

Dips


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().

like image 44
it3xl Avatar answered Nov 13 '22 16:11

it3xl


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

$( "#board" ).stop().animate({ "opacity": 1 },300);
like image 4
Mikeys4u Avatar answered Nov 13 '22 15:11

Mikeys4u