gpt4 book ai didi

jquery - 如何停止 fadeIn() 闪烁?

转载 作者:行者123 更新时间:2023-12-03 22:28:40 24 4
gpt4 key购买 nike

目前我有一个简单的 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

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

关于jquery - 如何停止 fadeIn() 闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10890776/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com