Как перестать мигать fadeIn ()?

В настоящее время у меня есть простой 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>
 nnnnnn05 июн. 2012 г., 04:30
Не имеет отношения к проблеме, но учтите, что вам следуетmouseover а такжеmouseout методы, позволяющие избежать создания одного и того же объекта jQuery дважды:$('.content .guide ul.guide li .event').mouseover(function(){ ... }).mouseout(function() { ... });

Ответы на вопрос(4)

У меня было это, и это решило мою проблему (я использовал fadeIn и fadeOut)

$( "#board" ).stop().animate({ "opacity": 1 },300);
 20 июн. 2017 г., 21:50
Это сработало для меня! Благодарю.
Решение Вопроса

Ты можешь использовать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>
 muudless05 июн. 2012 г., 05:02
@nnnnnn, который творил чудеса, спасибо
 01 февр. 2014 г., 01:36
@nnnnnn the first 'a true; apos; очищает очередь анимации и второй 'true' apos; прыгает в конец текущей анимации.api.jquery.com/stop
 01 февр. 2014 г., 06:22
@ Джефф - да, я знаю. Я имел в виду, что я бы подтвердил ответ, если Дипс добавил более подробное объяснение.
 05 июн. 2012 г., 04:28
Я собирался дать тот же ответ. Вот скрипка, которую я создал для нее:jsfiddle.net/MnwTN Обратите внимание, что вы можете хотеть.stop(true,true) (в противном случае, в зависимости от того, как вы маневрируете мышью, вы можете закончить с исчезновением элемента, даже если вы все еще над ним). Я дал бы тебе +1, если ты объяснилwhy это исправляет вещи ...
 05 июн. 2012 г., 04:25
Просто отметить, чтоfadeTo ничего особенного, и вся магия вstop: .stop().fadeIn() а также.stop().fadeOut() работать так же.

Старый вопрос, но я хотел добавить свои выводы после борьбы с этой проблемой, на случай, если они пригодятся любому, кто наткнется на этот вопрос.

При использовании 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>

Я получил эту проблему только в Google Chrome.

Я изменился.fadeIn в.fadeTo(myDuration,1) починить это.

Также для меня все отлично работает без.stop().

Ваш ответ на вопрос