在我的插件中的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

见Jimbo的评论：

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();
});

查看FIDDLE