How to stop an interaction/animation from finishing?

I’ve got a situation where I’ve got a megamenu that fades in when the user hoovers over the menu row. This works fine.

Then the megamenu fadesout (also an interaction) on mouse leave from the megamenu. This, too, works fine.

What doesn’t work is when the user leaves the megamenu and hoovers over the regular menu.

This causes the fadeout from the mouse leave event to trigger, and fades the menu out. But immediately after the fadeout, the fade in from entering the regular menu triggers, fading it in.

What I’d like to accomplish is, when the user leaves the megamenu and enters the regular menu, it simply stops both the animations so that the menu remains where it was, like so:

  1. Mouse enter menu
  2. Megamenu fades in
  3. Mouse enters megamenu (nothing happens)
  4. Mouse leaves megamenu
  5. Fadeout starts
  6. Mouse enters menu
  7. Fadeout interrupted, megamenu shown

Any way to do this?

TIA!