JS/JQuery - Попытаться добиться Покажите DIV и выключаться использование MouseEnter() MouseLeave() так, чтобы не получить повторную анимацию

Question

Так вот мой код: Это не похоже

var timeouts = {}; 
    $('#nav ul > li').mouseenter(function() { 
     clearTimeout(timeouts['menu']); 
     $(this).find('div.dropdown').stop(true).slideDown(200); 
    }); 
    $('#nav ul > li').mouseleave(function() { 
     timeouts['menu'] = setTimeout(function() { 
      $(this).find('div.dropdown').stop(true).slideUp(200); 
     }, 1000) 
    }); 

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

Answer 1

Внутри вашей анонимной функции this, вероятно, не определен как элемент HTML.

Поместите this в надлежащем объеме:

var timeouts = {'menu': false}; 

$('#nav ul > li').hover(function() { 
    if (timeouts['menu'] !== false) { 
     clearTimeout(timeouts['menu']); 
    } 

    $(this).find('div.dropdown').stop(true).slideDown(200); 
}, function() { 
    var $this = $(this); 

    timeouts['menu'] = setTimeout(function() { 
     $this.find('div.dropdown').stop(true).slideUp(200); 
    }, 1000) 
}); 

Кроме того, вы, вероятно, чтобы получить ошибку, если вы пытаетесь вызвать timeouts['menu'] без него определяется первым. Я установил бы его значение по умолчанию, а затем проверить, существует ли оно до его использования.

Answer 2

Вы можете попробовать hoverIntent плагин или взглянуть на некоторые из решений здесь: jQuery if mouse is over for 2 sec. begin animation or don't animate at all