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()和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悬停是您想要使用的：

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

使用jquery设置延迟或超时

4 个答案: