javascript - Javascript ネストされたメニュー スライドダウン?

Question

ネストされたメニューを下にスライドさせましたが、問題は、li をオン/オフしてネストされた ul をアニメーション化して下にスライドさせると、ホバーを外すとアニメーションが何度も実行され続けることです。ホバリングを高速で行ったり来たりしていたときに終了します。ホバリングしていないときのアニメーションを防ぐために、上下に移動し終わるまでアニメーションを登録しないようにしたいと思います。

これが私のJavascriptです：

function mainmenu() {
    $(" ul ul ").css({
        display: "none"
    }); 
    $(" ul li").hover(function () {
        $(this).find('ul:first').css({
            visibility: "visible",
            display: "none"
        }).slideDown(100);
    }, function () {
        $(this).find('ul:first').slideUp(100);
    });
}
$(document).ready(function () {
    mainmenu();
});

Answer 1

jQuery ' stop() ' を使用します。

function mainmenu() {
$(" ul ul ").css({
    display: "none"
}); 
$(" ul li").hover(function () {
    $(this).find('ul:first').css({
        visibility: "visible",
        display: "none"
    }).stop().slideDown(100);
}, function () {
    $(this).find('ul:first').stop().slideUp(100);
});
}