javascript - Javascript-マウスリーブ時にアニメーションを遅らせる

Question

私は単純なJavascriptを使用しており、mouseenter時にメニューがスライドアウトし、mouseleave時にスライドインします。ただし、マウスがその領域を離れるときは、メニューを数秒間そのままにしてからスライドインします。

これは私が使用しているコードです。

$('#nav').mouseleave(function()
    {
            $("#nav").animate({"left": "0"}, "1000");
            $("#nav li a").css({ opacity: 0.7 });
            $("#nav li.current a").css({ opacity: 1 });
});

スタックオーバーフローとグーグルを検索しましたが、どのソリューションも機能させることができませんでした。私はJSを初めて使用します

何か案は？

Answer 1

アニメーションが実行される前に、もう一度ホバーすると、少し良くなります。

$('#nav').hover(function () {
    clearTimeout(this.timer);
}, function () {
    this.timer = setTimeout(function () {
        $("#nav").animate({"left": "100"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });
    }, 1000);
});

Answer 2

.delay()JQuery APIの関数を使用します：http： //api.jquery.com/delay/

$("#nav").delay(3000).animate({"left": "0"}, "1000");

これは、animate（）を呼び出す前に3000ミリ秒（3秒）待機します

Answer 3

私はsetTimeout（）メソッドのかなりの大ファンです。

http://www.w3schools.com/jsref/met_win_settimeout.asp

だから私はします

$('#nav').mouseleave(function()
{
        setTimeout( function(){
        $("#nav").animate({"left": "0"}, "1000");
        $("#nav li a").css({ opacity: 0.7 });
        $("#nav li.current a").css({ opacity: 1 });},1000)
});