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

5

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

Ваш Ответ

4   ответа
2

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

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

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

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

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

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

Похожие вопросы