8

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

4 回答 4

23

您可以使用它stop().fadeTo()来防止这种情况。请参阅下面的代码和演示

<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>
于 2012-06-05T02:25:27.047 回答
8

我只在谷歌浏览器中遇到了这个问题。

我已更改.fadeIn为.fadeTo(myDuration,1)修复它。

另外，对我来说，没有.stop().

于 2013-02-18T21:56:11.793 回答
4

我有这个，这解决了我的问题（我正在使用fadeIn和fadeOut）

$( "#board" ).stop().animate({ "opacity": 1 },300);
于 2015-02-20T13:32:03.623 回答
0

老问题，但我想在解决这个问题之后添加我的发现，以防它们对任何偶然发现这个问题的人有所帮助。

使用 stop().fadeIn() 时，它只会暂停操作，直到触发下一个操作。

然后我尝试使用finish().fadeIn() 和finish().fadeOut() 而不是stop()。这工作得更好。当前正在播放的动画立即结束，并开始播放当前动画。

对于上面的示例，它将是：

<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>
于 2013-12-29T22:22:03.893 回答