Установка задержки или таймаута с помощью jQuery

Question

$('.showmenu').bind("mouseenter", function (e) { 
       $('ul.secondul').show(); 
}); 
$('.showmenu').bind("mouseleave", function (e) { 
       $('ul.secondul').hide(); 
}); 

Есть ли способ сделать вторую функцию не срабатывать сразу же, но после 1 секунды задержки? Поэтому, когда пользователь случайно выталкивает мышь из выпадающего меню, вкладка не закрывается немедленно и дает пользователю возможность переместить мышь обратно на нее.

Answer 1

Вы можете сделать это:

$('.showmenu') 
.bind("mouseenter", function (e) { 
    if($(this).data("timer")) 
     clearTimeout($(this).data("timer")); 
    $('ul.secondul').show(); 
}) 
.bind("mouseleave", function (e) { 
    $(this).data("timer", setTimeout(function(){ 
     $('ul.secondul').hide(); 
    }, 1000)); 
}); 

Использование $(this).data, потому что это класс, и вы можете иметь больше .showmenu пунктов.

Answer 2

Вы можете сделать что-то вроде этого -

vat timeout; 
$('.showmenu').bind("mouseenter", function (e) { 
       $('ul.secondul').show(); 
       clearTimeout(timeout); 
}); 
$('.showmenu').bind("mouseleave", function (e) { 
      timeout = setTimeout(function(){ 
      $('ul.secondul').hide(); 
      },1000); 
}); 

Answer 3

Я считаю, JQuery парения является то, что вы хотите использовать:

$('.showmenu').hover(
    function() { 
     $('ul.secondul').show(); 
    }, 
    function() { 
     $('ul.secondul').hide(); 
    } 
); 

Answer 4

Если вы используете fadeIn() и fadeOut() (или другие анимации), вы можете цепи его с delay() примерно так:

$('.showmenu').hover(

    function() { 
    $('ul.secondul').stop(true,true).fadeIn(200); 
    }, 

    function() { 
    $('ul.secondul').stop(true, true).delay(1000).fadeOut(200); 
    } 

); 

Fiddle : http://jsfiddle.net/7VcwF/