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

この問題は Google Chrome でのみ発生しました。

私はそれを修正するために変更.fadeInしました。.fadeTo(myDuration,1)

また、私にとっては、すべてがなくても問題なく動作し.stop()ます。

于 2013-02-18T21:56:11.793 に答える
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>
于 2013-12-29T22:22:03.893 に答える