jquery - How to stop fadeIn() blinking? -
currently have simple div want have fade in on mouseover of div, blink 3 times.
i've read of other questions , think has how code structured. i'm not sure how correct mine it's basic already.
here 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>
you can use stop().fadeto() prevent that. see below code , 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>
Comments
Post a Comment