javascript - 在我的插件中对 mouseenter 应用 .delay()

Question

我有一个 div，在 mouseenter 上，应该显示另一个 div。我不确定如何在插件中实现这一点。这是我的代码，也是我迄今为止所尝试的。

代码：JsFiddle

<div class="hover-me"></div>
<div class="show-me"></div>

    var Nav = {
        hover_me: $('.hover-me'),
        show_me: $('.show-me'),

    init: function() {
        Nav.toggle_display();
        console.log('init');
    },

    toggle_display: function() {
        Nav.hover_me.mouseenter(function() {
            Nav.show();
        });

        Nav.hover_me.mouseleave(function () {
            Nav.hide();
        });
    },

    show: function() {
        Nav.show_me.fadeIn();
    },

    hide: function() {
        Nav.show_me.fadeOut();
    }
};

我试图这样做，但没有任何运气。

Nav.hover_me.mouseenter(function() {
      Nav.delay(1000).show();
 });

Answer 1

见金博的评论：

var Nav = {
    // [...]
    timeoutId: undefined,
    // [...]
};

Nav.hover_me.mouseenter(function() {
    Nav.timeoutId = setTimeout(function() {
        Nav.show();
    }, 1000);
});

Nav.hover_me.mouseleave(function () {
    if (Nav.timeoutId) { clearTimeout(Nav.timeoutId); }
    Nav.hide();
});

看小提琴