目前我有一个简单的div,我希望在另一个div的鼠标悬停时淡入,但它会闪烁3次.
我已经阅读了其他一些问题,我认为这与我的代码结构有关.但我不确定如何纠正我的,因为它已经如此基本.
这是我的代码：
<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()来防止这种情况发生.
见下面的代码和 demo here
见下面的代码和 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>
