jQuery mouseleave delay

Got a simple problem, which it doesn't look like HoverIntent would solve.

I have two elements (lets say a button and a div), one element is the trigger to start the div expanding, which is triggered by a mouseenter event (this would be a suitable candidate for HoverIntent).

However when the mouse leaves the expanded div for a given amount of time I need it to contract again, however if they re-enter the div it should NOT contract. Most hoverintent style plugins would give me this functionality but only for 1 element, and as one element controls the expanding (button - mouseenter) and one controls the contracting (div - mouseleave).

I know I could write some code to just do a setTimeout to delay for a period and make sure that the mouse is still outside of the area, but I would rather use a pre-made plugin if one exists.

So could anyone advise if this exists?

-- Edited --

Edited the above question to make clear that the main intent part is to stop it contracting the div if the mouse re-enters the div within a g开发者_如何学Goiven amount of time, lets say 2 seconds. So the div should expand on mouseenter button, then contract if mouseleaves the div for >= 2 seconds.

Not something like this?

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

The unbind is there so that you don't wind up with a bunch of events tied to the element. Just reset and go.

Added to satisfy clarification of question.

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