Javascript listener not firing if before end of jquery .slideDown() animation

Question

simple one i hope!

The problem im having is that i have an ('itemID').mouseover, which fires a jquery slide-down animation for a menu box. The problem is that if the mouse leaves the original item (in this case a text link) before the end of the slideDown() amination, the .mouseleave function is not called.

It works fine otherwise!!

This is what im using: (menu14 is the text link, FunctionsMenu3 is the hidden div containing the menu items)

$('#menu14').mouseover(function() {
   $('#FunctionsMenu3').slideDown('fast', function() {
    // Animation complete.
  });
});

$('#FunctionsMenu3').mouseleave(function() {
   $('#FunctionsMenu3').slideUp('fast', function() {
    // Animation complete.
  });
});

It seem to me that the JS CANT be fired, because its busy doing the slide... site can be seen at http://www.impero-classroom-management.com thanks in advance!!

Answer 1

Well i got around it in the end by not animating the drop down, only the slide up.

not a fix, but it was all i could really do!!

$('#FunctionsMenu5').mouseleave(function() {
   $('#FunctionsMenu5').slideUp('fast', function() {
    // Animation complete.
  });
});
$('#menu15').mouseover(function() {
   $('#FunctionsMenu5').show();
});

Answer 2

On mouseleave, try .stop() to cancel the current animation.

$('#menu14').hover(
  function() {
   $('#FunctionsMenu3').slideDown('fast');
  },
  function() {
   $('#FunctionsMenu3').stop().slideUp('fast');
  }
);