jQuery: предотвращение анимации стека

Question

Я знаю, что есть несколько других постов с решениями этого вопроса, но моя текущая проблема немного отличается.

У меня есть два события для элемента - mouseenter и mouseleave. Первый изменил цвет моего элемента на светлый, а другой обратно на темный, это создает эффект мигания.

Проблема в том, что когда я пару раз вхожу и выхожу, стек событий, и он мигает много раз, даже если не запускаются новые события. Я хотел бы предотвратить это, но .stop() не помогает.

Вот подвох: я хотел бы включить 1 вспышку, несмотря ни на что, но не более 1. Поэтому, когда кто-то движется внутрь / наружу - событие mouseenter будет срабатывать, после него mouseleave и после него ничего .. пока не сработает другой вход / выход.

Полагаю, это можно сделать, блокируя (не слушая) новые события, когда вход / выход срабатывает до тех пор, пока эффект не закончится, но я не знаю, как это сделать, не связывая и не связывая его снова. Разве нет lockEvent() или чего-то еще?

Answer 1

в jQuery есть псевдокласс ":animated" Вы можете использовать его при первом вводе мышью, например:

if ( $(this).is(':animated')) {
     return false;
}

для предотвращения дополнительной анимации

Answer 2

Вы уже использовали .stop (true) или .stop (true, true)?

Answer 3

Вы можете попробовать установить bool var и запустить только если false ...

var anim = {
    animating: false,
    over: function(){
        if(!anim.animating)
        {
            anim.animating = true;
            // do you animation here
            // and set your animating bool to false before calling outro...
            $('#elem').animate({/*some css change*/ }, 1000, function(){
                anim.animating = false;
                anim.out();
            });
        }
    },
    out: function(){
        if(!anim.animating)
        {
            anim.animating = true;
            //do your outro animation here
            $('#elem').animate({/*some css change*/ }, 1000, function(){
                anim.animating = false;
            });
        }
    }
};

тогда пусть ваш слушатель вызывает anim.over и anim.out ...

$('#elem').on('mouseenter', function(){
    anim.over();
}).on('mouseleave', function(){
    anim.out();
});

Таким образом, вы будете вызывать анимацию при вводе, и она автоматически отключит анимацию outro, когда вступление завершится.