Предотвратить ненужные события

Question

$('#menu > li').hover(function(){
     $(this).find('ul').slideDown();
});

$('#menu > li').mouseleave(function(){

     $(this).find('ul').slideUp();
});

это работает нормально, но если я наведу / оставлю элемент меню <li> много раз и очень быстро, как только я остановлюсь, он будет скользить вверх и вниз столько раз, сколько завис,

пожалуйста, посмотрите этот вид захвата видео

http://www.screenr.com/dkes

¿как это можно предотвратить?

Answer 1

Вы можете использовать stop, чтобы остановить текущую анимацию. Вы также можете объединить два обработчика событий и просто использовать hover (который может принимать 2 аргумента: первый - это функция для запуска на mouseenter, второй - для запуска на mouseleave) :

$('#menu > li').hover(function() {
    $(this).find('ul').stop(true, true).slideDown();
}, function() {
    $(this).find('ul').stop(true, true).slideUp();
});

Первый аргумент - clearQueue, который будет останавливать анимацию в очереди бесконечно, когда вы постоянно наводите курсор. Второй аргумент - jumpToEnd, который принудительно завершает любую запущенную анимацию перед началом новой.

Вот простой пример .

Answer 2

Все сводится к тому, что у вас есть переменная, которая будет хранить состояние вашего скольжения и предотвратит дальнейшие запросы, если скольжение уже происходит.

Установите флаг в начале скольжения и используйте обратный вызов, чтобы сбросить флаг.

var closing = false;
$('#menu > li').mouseleave(function(){
     closing = true;
     $(this).find('ul').slideUp(null, function(){
         closing = false;
     });
});

// then in the hover method you would just check the value of closing to see if to allow or not opening.

Вторая идея была раскрыта немного раньше Джеймсом Аллардисом, и мне больше нравится, если она работает.