如何停止fadeIn()闪烁?

时间:2012-06-05 02:21:50

标签: jquery

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

4 个答案:

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