javascript - hoverIntent メニュー: Entry インテントと Exit インテントがあり、メニュー項目間のアニメーションはありません

Question

私のサイトにはメイン メニューがあり、Hover Intent プラグインを使用してサブメニューを表示しています。ホバリングすると、メニューはイージングでフェードインし、もちろんマウスが離れるとイージングでフェードアウトします。

今、私がやろうとしていることは非常に単純に思えますが、それを実装する方法がわかりません。ナビゲートする最初のメニューのみをアニメーション化できるようにする必要がありますが、それらの間にカーソルを置いたときにアニメーションが表示されないようにする必要があります。

たとえば、次のメニュー構造があるとします。

• 家
• 約
  • 会社
  • ミッション＆ビジョン
• ソリューション
  • ソリューションについて
  • 返金保証
• お問い合わせ

「About」と「Solutions」の両方にサブメニューがあります。マウスを「About」の上に置くと、そのサブメニューがフェードインします。マウスを「About」から「Solutions」に直接移動すると、表示されているサブメニューが消えます (フェードしません)。 「Solutions」サブメニューを単純に表示します (フェードしません)。次に、マウスが「ソリューション」を離れると、そのメニューがフェードアウトするはずです。

最初はばかげているように聞こえるかもしれませんが、このプロセスには理由があります。ほら、サブメニューの背後にページ全体のブロック要素があり、それもメニュー自体でアニメーション化されています。その目的は、メニューをより目立たせることです。さて、メニューを切り替えるたびにフェードアウトしたくありません。

これは可能ですか？

現在の[基本]コードは次のとおりです。

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