jquery - ページの読み込み時にマウス イベントが即座に発生し、二度と発生しない問題

Question

jquery animate を使用してホバーして表示するフライアウト メニューを作成しようとしています。マウスを離すと折りたたまれます。私は最初に hoverIntent と次のコードから始めました。

function collapseMenu() {
    $("#myMenu").animate({ "left": "+=50px" }, "slow");
}

function expandMenu() {
    $("#myMenu").animate({ "left": "-=50px" }, "slow");
}

$('#myMenu').hover(expandMenu(), collapseMenu());

ページをロードすると、メニューが右に 50 ピクセル移動し、次に左に 50 ピクセル移動します。そして、実際にメニューにカーソルを合わせると、次のコンソールエラーが発生します

キャッチされていない TypeError: 未定義のメソッド 'apply' を呼び出せません

hoverintent.js の 69 行目と 82 行目

したがって、jquery の .hover を試してみたところ、エラーなしで同じ結果が得られました。その後、次のテストに進みました。

$('#myMenu').mouseenter(alert("mouse entered menu"));
$('#myMenu').mouseleave(alert("mouse left menu"));

ページの読み込み時に、すぐに 2 つのアラートが表示されます...ホバーしても何も表示されません。これらの mouseenter および mouseleave イベントを document.ready とその外側で試しました (楽しみのため)、どちらも同じ結果になります。興味のある方は、メニューの html をご覧ください。

    <ul id="myMenu" class="nav nav-list">
        <li id="lnkHome" class="active"><a href="#">Home</a></li>
        <li class="nav-header">Issue Reports</li>
        <li id="lnkSoftware" ><a href="#">Software and Apps</a></li>
        <li id="lnkOS" class="disabled"><a href="#">Operating Systems</a></li>
    </ul>