jquery - Jqueryドロップダウンメニューでメニューの非表示を遅らせる方法は?

Question

正常に動作するドロップダウン メニューがありますが、メニューからマウスを移動してもすぐに再び非表示にならないようにしたいと考えています。したがって、基本的には 1 秒の遅延が必要です。

setTimeout について読みましたが、それが必要かどうかわかりません。

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show();
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide();
});

Answer 1

setTimeoutまさにあなたが必要とするものです。

$('#mainnav a').bind('mouseout', function()
{
    var menu = this;
    setTimeout(function()
    {
        $(menu).parents('li').children('ul').hide();
    }, 1000);
});

Answer 2

mouseout の場合、hide() 呼び出しの前にチェーン アニメーションを追加します。

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').animate({opacity:0.99}, 2000).hide();
});

これにより、2 秒の遅延が発生します。

Answer 3

表示と非表示を切り替えるパラメータとして「slow」を指定します。JQuery ドキュメントから。

$('#mainnav a').bind('mouseover', function()
{
    $(this).parents('li').children('ul').show("slow");
});

$('#mainnav a').bind('mouseout', function()
{
    $(this).parents('li').children('ul').hide("slow");
});