Проблема с событиями мыши, запускаемыми мгновенно при загрузке страницы и никогда больше

Question

Я пытаюсь сделать всплывающее меню, которое использует JQuery Animate при наведении курсора, чтобы показать себя, а затем оно исчезает при наведении мыши. Я изначально начал с hoverIntent и следующего кода:

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

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

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

Когда я загружаю страницу, меню перемещается вправо на 50 пикселей, затем влево на 50 пикселей. И тогда, когда я на самом деле наведите курсор на меню, я получаю следующую ошибку консоли

Uncaught TypeError: Невозможно вызвать метод apply из undefined

на линиях 69 и 82 hoverintent.js

Поэтому я только что попробовал jquery.hover и получил те же результаты, но без ошибки. После этого я отвлекся на следующий тест:

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

Теперь при загрузке страницы я сразу получаю два оповещения... ничего при наведении. Я пробовал эти события mouseenter и mouseleave в документе. Уже и вне его (просто для удовольствия) оба имеют одинаковые результаты. Если вам интересно, вот мой 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>

Answer 1

Попробуйте следующий код

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

$('#myMenu').hover(expandMenu(), collapseMenu()); фактически выполняет функции мгновенно и назначает их возвращаемое значение в качестве обработчиков событий hover/out