Jquery mouseleave延迟

Question

有一个简单的问题，看起来不像HoverIntent会解决。

我有2个元素（比如一个按钮和一个div），1个元素是启动div扩展的触发器，由mouseenter事件触发（这将是HoverIntent的合适候选者）。

然而，当鼠标离开扩展的div一段给定的时间后，我需要它再次收缩，但是如果它们重新进入div它不应该收缩。大多数hoverintent样式插件会给我这个功能，但只有1个元素，并且一个元素控制扩展（按钮 - mouseenter），一个控制收缩（div - mouseleave）。

我知道我可以编写一些代码来执行一个setTimeout来延迟一段时间并确保鼠标仍然在该区域之外，但我宁愿使用预制的插件（如果存在的话）。

那么有人可以建议这是否存在吗？

- 已编辑 -

编辑上面的问题，明确主要意图是如果鼠标在给定的时间内重新进入div，则停止收缩div，比方说2秒。所以div应该在mouseenter按钮上展开，然后收缩，如果鼠标移动div> = 2秒。

Answer 1

不是这样的吗？

$('.hover-items').each(function(idx, el){
  $(el).mouseenter(function() {
    $(this).slideDown(300);
    $('#target_div').unbind().mouseleave(function() {$(this).slideUp(300)});
  });
});

unbind就在那里，所以你最终不会遇到与元素相关的一堆事件。只需重置并继续。

---

添加以满足问题的澄清。

$('.hover-items').each(function(idx, el){
  $(el).mouseenter(function() {
    clearTimeout($(el).data('timer'));
    $('#target_div').slideDown(300)
      .unbind()
      .mouseleave(function() {
        var closure = function(){$('#target_div').slideUp(300)};
        $(el).data('timer', setTimeout(closure,2000));
    });
  });
});