hoverIntent + close button (problem with timeout?)

I'm using hoverIntent with a shopping bag (#bagContainer), and everything works OK.

function bagOver(){
    $(this).find("#bagContainer").stop().fadeTo('fast', 1).show(); 
}
function bagOut(){
  $(this).find("#bagContainer").stop().fadeTo('fast', 0, function() {
      $(this).hide();
  });
}
var bagHoverConfig = {
     over: bagOver,
     bagTimeout: 3000, 
     out: bagOut 
};
$("#userBox .row:nth-child(2)").hoverIntent(bagHoverConfig);

But I need to add an "extra" close button (#bagCollapser) inside the bag, something like:

$("#bagCollapser").click(function () {
    $('#bagContainer').hide();
});

It closes #bagContainer, but it seems there is a conflict with hoverIntent:

1. the button hides the bag, but then, after bagTimeout , hoverIntent hides it again
2. if the bag has been closed via the button, it can't be shown again until hoverIntent's timeout/delay has passed...

开发者_StackOverflow

Any ideas?

Thanks a lot in advance!

---

I've got the same issue, I'm using hoverIntent to display a megamenu. Inside this megamenu I've created a close button :

$("#closebutton").click(function () {
  $('#megasubmenu').hide();
  $('#megasubmenu').closest('li.level0').find('a.level0').removeClass("megahover");
});

The close button closes the submenu but the hoverIntent function is still running because as soon as there is a mouse move the submenu reappears...