How to stop fadeIn() blinking?

jquery

Solution

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>

Problem

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> ```

Original source