目前我有一个简单的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>
答案 0 :(得分:20)
您可以使用stop().fadeTo()
来防止这种情况发生。
请参阅以下代码和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>
答案 1 :(得分:6)
我只在Google Chrome中遇到此问题。
我已将.fadeIn
更改为.fadeTo(myDuration,1)
以修复此问题。
另外,对我而言,没有.stop()
,一切正常。
答案 2 :(得分:2)
我有这个,这解决了我的问题(我使用的是fadeIn和fadeOut)
$( "#board" ).stop().animate({ "opacity": 1 },300);
答案 3 :(得分:0)
老问题,但是我想在解决这个问题之后添加我的发现,以防它们对遇到这个问题的人有所帮助。
当使用stop()。fadeIn()时,它只会暂停动作,直到触发下一个动作。
而不是stop(),然后我尝试了finish()。fadeIn()和finish()。fadeOut()。这样做效果更好。当前正在进行的动画立即完成,并开始当前动画。
对于上面的例子,它将是:
<script type="text/javascript">
$(document).ready(function(){
$('.content .guide ul.guide li .event').mouseover(function(){
$(this).find('.info').finish().fadeTo('slow',1);
});
$('.content .guide ul.guide li .event').mouseout(function(){
$(this).find('.info').finish().fadeTo('slow',0);
});
});
</script>