Wie kann man das Blinken von fadeIn() beenden?

Question

Derzeit habe ich ein einfaches Div, das ich bei Mouseover eines anderen Divs einblenden lassen möchte, aber es würde 3 Mal blinken.

Ich habe einige der anderen Fragen gelesen, und ich denke, das hat damit zu tun, wie mein Code strukturiert ist. Aber ich bin mir nicht sicher, wie ich meinen korrigieren kann, da er bereits so grundlegend ist.

Hier sind meine Codes:

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

Answer 1

Sie können verwenden stop().fadeTo() um das zu verhindern. Siehe untenstehenden Code und Demo hier

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

Answer 2

Ich habe dieses Problem nur in Google Chrome.

Ich habe mich geändert .fadeIn a .fadeTo(myDuration,1) um es zu reparieren.

Außerdem funktioniert bei mir alles auch ohne .stop() .

Answer 3

Ich hatte dies und dies löste mein Problem (ich war mit fadeIn und fadeOut)

$( "#board" ).stop().animate({ "opacity": 1 },300);

Answer 4

Die Frage ist alt, aber ich wollte meine Erkenntnisse, die ich bei der Bekämpfung dieses Problems gewonnen habe, hinzufügen, falls sie für andere hilfreich sind, die über diese Frage stolpern.

Bei der Verwendung von stop().fadeIn() würde die Aktion einfach angehalten, bis die nächste Aktion ausgelöst wird.

Anstelle von stop() habe ich dann finish().fadeIn() und finish().fadeOut() ausprobiert. Das funktionierte viel besser. Die aktuell laufende Animation wird sofort beendet und die aktuelle gestartet.

Für das obige Beispiel würde dies bedeuten:

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