Добавление задержки MouseOut к этому куску jQuery (навигация по меню)

Question

Я полный абсолютный nQuery noob.Я следовал учебному пособию по добавлению меню навигации CSS / jQuery на свой сайт, и у меня это получилось. Единственное, что я хотел бы видеть, это добавить небольшую задержку при наведении мыши, потому что выпадающее меню мгновенно исчезаеткогда вы щелкаете мышью, это делает меню немного раздражающим в использовании.Вот мой сценарий:

function mainmenu(){
$(" .top-menu ul ").css({display: "none"}); // Opera Fix
$(" .top-menu li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

Кто-нибудь будет так любезен добавить необходимый код в этот сценарий.Я обещаю изучить, как ты это сделал, так что я действительно учусь на этом; -D

Answer 1

Вы можете сделать что-то вроде этого с задержкой в ​​500 мс:

function mainmenu(){
  $(".top-menu ul ").hide();
  $(".top-menu li").hover(function() {
    clearTimeout($.data(this, 'timeout'));
    $(this).find('ul:first').show(400);
  }, function() {
    $.data(this, 'timeout', setTimeout($.proxy(function() { 
       $(this).find('ul:first').hide();
    }, this), 500));
  });
}
$(mainmenu);

Это добавляет задержку 500 мс через setTimeout() и просто сохраняет идентификатор таймера вместе с элементом, используя $.data(), при наведении курсора на элемент, он очищается тайм-аут и не будет запускаться снова, пока вы не закончите ... поэтому вы должны быть отключены от элемента на 500 мсек, чтобы он скрылся.

Или сделайте что-то очень похожее с плагином hoverIntent , предназначенным именно для этой проблемы.

Answer 2

$(" .top-menu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){

    // Note here...
    setTimeout(function(){
        $(this).find('ul:first').css({visibility: "hidden"});
    }, 2000);
    // 2000 is a delay time in milliseconds, change it

});