меню hoverIntent: намерения входа и выхода, но без анимации между элементами меню

Правильно, поэтому у меня есть основное меню на моем сайте, и я использую плагин Hover Intent для отображения подменю. Когда зависание меню будет исчезать с ослаблением, и, конечно, будет исчезать с ослаблением, когда мышь отходит.

Теперь то, что я пытаюсь сделать, кажется довольно простым, но я просто не знаю, как его реализовать. Мне нужно иметь возможность анимировать первое меню, к которому я перехожу, но когда я нахожу между ними, анимации не должно быть.

Например, допустим, у меня есть следующая структура меню:

• Главная
• Около
  • Компания
  • Видение миссии
• Решения
  • О наших решениях
  • Гарантия возврата денег
• Свяжитесь с нами

"О" и "Решения" имеют подменю. Если я наведите указатель мыши на "О", я хочу, чтобы его подменю затухало. Если я перемещаю мышь непосредственно из "О программе" в "Решения", я хочу, чтобы видимое подменю просто исчезло (без затухания), и подменю "Решения" просто появится (без замирания). Затем, когда мышь покидает "Решения", это меню должно исчезать.

Сначала это может показаться глупым, но у меня есть причина для этого процесса. См. Раздел "У меня есть элемент блока страницы, расположенный за подменю, который также анимируется с помощью самих меню. Его цель - сделать меню лучше. Теперь я не хочу, чтобы это замирание каждый раз, когда я переключаюсь между меню.

Это возможно?

Вот мой текущий [основной] код прямо сейчас:

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');