Добавление задержки в выпадающее меню jquery

Question

Я пытаюсь добавить задержку в простое выпадающее меню.С помощью следующего кода я получаю задержку, но неправильный вид.Когда я очень быстро перемещаю мышь по меню, оно задерживает его, но все равно открывает его через 300 мс.Правильным поведением было бы открытие меню, когда мышь зависла на нем на 300 мс, то же самое при выходе из него.

$('#menu-item-1226:not(.parent-pageid-1225 #menu-item-1226)').hover(function(){
    var menu = this;
    setTimeout(function(){
        $(menu).find('ul').slideToggle(100);
    }, 300);
});

Нужно ли как-то stop это или какой правильный подход здесь?
Заранее спасибо

Answer 1

Это, вероятно, то, что вы ищете, однако использование плагина Jquery HoverIntent также будет работать, а может быть, и лучше.

без намерения наведения:

$(function() {
        var timer;
    $('#Header li').hover(function(){
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                           $(this).find('ul').slideToggle(100);
                }, 500)
    },
    // mouse out
    });

});

с плагином для наведения цели

$("#Header li").hoverIntent({
    sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
    interval: 50,   // number = milliseconds of polling interval
    over: function () {
        $('ul', this).slideDown(220);
    },  // function = onMouseOver callback (required)
    timeout: 0,   // number = milliseconds delay before onMouseOut function call
    out: function () {
        $('ul', this).hide();
    }    // function = onMouseOut callback (required)
});

Answer 2

Проверьте этот плагин: http://cherne.net/brian/resources/jquery.hoverIntent.html:)

Answer 3

Этот пост содержит образец скриптового кода и работает нормально.

Раскрывающееся меню JQuery с использованием сдвига и скольжения при наведении курсора с перебоями

Answer 4

$(menu).find('ul').delay(300).slideToggle(100);

Answer 5

просто используйте delay()

$(menu).find('ul').delay(300).slideToggle(100);

Вы говорите, задержка в мс, после этого только ваш эффект.