Обработчик события JQuery hover запускается слишком много раз

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

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

Кто-нибудь знает, как я могу это исправить?

var dropdown = function() {
    $('.dropdown').hover(function() {
        $('.inbutton').animate({
            top: '-188px'
        }, 200);
        $('.dr2button').animate({
            top: '0px'
        }, 200);
    }, function() {
        $('.inbutton').animate({
            top: '-122px'
        }, 200);
        $('.dr2button').animate({
            top: '-61px'
        }, 200);
    });
};


$(document).ready(dropdown);

javascript jquery pause
person Lion    schedule 16.12.2015    source источник
comment
Пожалуйста, отредактируйте, чтобы исправить фрагмент. В настоящее время ничего не отображает.   -  person Jon Surrell    schedule 16.12.2015
comment
api.jquery.com/stop   -  person j08691    schedule 16.12.2015
comment
Вы можете решить каждый раз, когда происходит событие mouseover или mouseout, анимировать или нет, на основе переменной, которой вы можете управлять после завершения анимации.   -  person Valentin S.    schedule 16.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

Предварительно добавьте функцию stop() к animate()

    $('.inbutton').stop().animate({
        top: '-122px'
    }, 200);

Сделайте это во всех функциях анимации.

Больше информации:

https://api.jquery.com/stop/

person Marcos Pérez Gude    schedule 16.12.2015