jquery - 使用 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

如果你使用fadeIn()and fadeOut()（或其他动画），你可以delay()像这样链接它：

$('.showmenu').hover(

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

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

);

小提琴：http: //jsfiddle.net/7VcwF/

Answer 4

我相信 jQuery hover 是你想要使用的：

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