hoverIntent menu: Entry and exit intents, but with no animation between menu items

Question

Right, so I have a main menu on my site, and I'm using the Hover Intent plugin to show sub-menus. When hovering the menu will fade in with easing, and of course will fade out with easing when the mouse moves away.

Now, what I'm trying to do seems quite simple, but I just don't know how to implement it. I need to be able to only animate the first menu that I navigate to, but when I hover between them, there should be no animation.

For example, let's say I have the following menu structure:

• Home
• About
  • Company
  • Mission & Vision
• Solutions
  • About our solutions
  • Money-back guarantee
• Contact Us

"About" and "Solutions" both have sub-menus. If I hover my mouse over "About", I want its sub-menu to fade in. If I move mouse directly from "About" to "Solutions", I want the visible sub-menu to simply disappear (no fading), and the "Solutions" sub-menu to simply appear (no fading). Then, when the mouse leaves "Solutions", that menu should fade out.

It might sound silly at first, but I have a reason for this process. See, I have a page-wide block element behind the sub-menus that also animates with the menus themselves. Its purpose is to make the menus stand out better. Now, I don't want that fading out every time I switch between menus.

Is this possible?

Here's my current [basic] code right now:

MainMenu = {
    setup: function(menu, over, out) {
        $(menu).hoverIntent(function() {
            $(this).find('div, ul')[over]({duration: 450, easing:'easeInOutQuad'});
            $('div.backFade')[over]({duration: 450, easing:'easeInOutQuad'});
        }, function () {
            $(this).find('div, ul')[out]({duration: 450, easing:'easeInOutQuint'});
            $('div.backFade')[out]({duration: 450, easing:'easeInOutQuint'});
        });
    }
}
MainMenu.setup('div.menuPlaceHolder > ul > li:has(div,ul)', 'fadeIn', 'fadeOut');

Answer 1

Found it:

MainMenu = {
    setup: function(menu, over, out) {
        $(menu).hoverIntent({
            over: function() {
                $(this).find('div, ul').stop()[over]({duration: 450, easing:'easeInOutQuad'});
                $('div.backFade').stop()[over]({duration: 450, easing:'easeInOutQuad'});
            },
            out: function () {
                $(this).find('div, ul').stop()[out]({duration: 450, easing:'easeInOutQuint'});
                $('div.backFade').stop()[out]({duration: 450, easing:'easeInOutQuint'});
            },
            interval: 0
        });
    }
}

I just set the interval method to 0 and added stop() to each action. So, the menus will always animate (which is okay, I guess), but the backFade will not.