Проблема с синтаксисом добавления setTimeout в существующий скрипт jQuery

Question

Я хочу добавить setTimeout в следующий код, чтобы перед выполнением эффекта fadeOut была короткая пауза.

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        }, 
        function() {
            $('ul', this).fadeOut(100);
        }
    );
});

Это то, что я пытаюсь, но я предполагаю, что синтаксис долженошибаться:

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        },
        function() {
            setTimeout(function() {
                $('ul,' this).fadeOut(100);
            });
        }
    );
});

Извините, если это глупый вопрос.Я новичок в jQuery.

Answer 1

Значение this отличается от setTimeout().Вам нужно сослаться на требуемый this в переменной или сначала получить ul и сослаться на него.

var th = this;
setTimeout(function() {
    $('ul', th).fadeOut(100);
});

или

var $ul = $('ul',this);
setTimeout(function() {
    $ul.fadeOut(100);
});

Answer 2

Вам также может понадобиться очистить тайм-аут при переходе через него с помощью clearTimeout() (если вы быстро наводите / снимаете), примерно так будет работать:

$(function() {  
  $('#menu li').hover(function() {
    clearTimeout($.data(this, 'timer'));
    $('ul', this).slideDown(50);
  }, function() {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul,' this).fadeOut(100);
    }, this), 400));
  });
});

Это сохраняет / извлекает идентификатор таймера, используя $.data(), и в настоящее время имеет задержку 400 мс, просто отрегулируйте соответственно.