如何停止fadeIn()闪烁? [英] How to stop fadeIn() blinking?
本文介绍了如何停止fadeIn()闪烁?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当前我有一个简单的div,我想在另一个div的鼠标悬停时淡入,但它会闪烁3次.
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.
这是我的代码:
<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>
推荐答案
您可以使用stop().fadeTo()
来防止这种情况.
请参见下面的代码,并在此处演示
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>
这篇关于如何停止fadeIn()闪烁?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文