在鼠标上应用 .delay(） 在我的插件中输入

To apply .delay() on mouseenter in my plugin

本文关键字：我的 插件 输入 鼠标 应用 delay      更新时间：2023-09-26

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

代码： 小提琴

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

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

看小提琴

相关文章：