Comment arrêter fadeIn() clignote?

Actuellement, j'ai un simple div que je veux avoir fondu sur la souris d'une autre div, mais il clignote 3 fois.

J'ai lu certaines des autres questions et je pense que cela a à voir avec la façon dont mon code est structuré. Mais je ne suis pas sûr de la façon de corriger la mienne aussi c'est tellement de base déjà.

Voici mes 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>
Pas le problème, mais notez que vous devez chaîne de votre mouseover et mouseout méthodes pour éviter la création d'un même objet jQuery deux fois: $('.content .guide ul.guide li .event').mouseover(function(){ ... }).mouseout(function() { ... });

OriginalL'auteur muudless | 2012-06-05

  1. 20

    Vous pouvez utiliser stop().fadeTo() pour l'en empêcher.
    Voir code ci-dessous et démo ici

    <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>
    Juste à noter que fadeTo est rien de spécial, et la magie est dans stop: .stop().fadeIn() et .stop().fadeOut() travail.
    J'étais sur le point de donner la même réponse. Voici le violon que j'ai créé pour ça: jsfiddle.net/MnwTN Notez que vous pouvez .stop(true,true) (sinon, en fonction de la façon dont vous les manoeuvres de la souris, vous pouvez vous retrouver avec l'élément disparu, même si vous êtes toujours sur elle). Je voudrais vous donner un +1 si vous l'avez expliqué pourquoi cette mise à jour corrige des choses...
    qui fait des merveilles merci
    le premier "vrai" efface l'animation de la file d'attente et le second un "vrai" sauts à la fin de l'animation en cours. api.jquery.com/stop
    oui, je sais. Je voulais dire que j'avais upvote la réponse si Trempettes ajouté une explication plus détaillée.

    OriginalL'auteur Dips

  2. 6

    Je n'ai eu ce problème sur Google Chrome.

    J'ai changé .fadeIn à .fadeTo(myDuration,1) pour le fixer.

    Aussi, pour moi, tout fonctionne bien sans .stop().

    OriginalL'auteur it3xl

  3. 2

    J'ai eu cela et cela a résolu mon problème ( j'ai été en utilisant fadeIn et fadeOut)

    $( "#board" ).stop().animate({ "opacity": 1 },300);
    Cela a fonctionné pour moi! Merci.

    OriginalL'auteur Mikeys4u

  4. 0

    Vieille question, mais je voulais ajouter mes conclusions après la lutte contre ce problème, dans le cas où ils sont utiles à toute personne qui bute sur cette question.

    Lors de l'utilisation de stop().fadeIn(), il serait tout simplement en pause, jusqu'à ce que la prochaine est déclenchée.

    Au lieu de stop(), j'ai ensuite essayé de finition().fadeIn () et finish().fadeOut(). Cela fonctionnait beaucoup mieux. Actuellement en cours d'animation est terminée immédiatement, et le courant est commencé.

    Pour l'exemple ci-dessus, ce serait:

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

    OriginalL'auteur Tiago