タイムアウトを追加するとすべてが壊れる

Question

3つのナビゲーションボタンがあり、その上にマウスを置くと、下のメニューが開きます。私はマウスがボタンを離れるときにタイマーを追加して、開いた後すぐに閉じないようにしたい。それから、ちょっとバグがあります。これは私が

var t; 

を追加し、私はそれにこのコードを追加した場合は破壊し、何もまた

function(){ t = setTimeout(function(){$('.d-info').hide(500)}, 500;) 
} 

を働かない

$('.info').hover(function() { 
    $('.d-skills').show(500); 
    $('.d-info').hide(500); 
    $('.d-exp').hide(500); 
}); 

ドロップメニューを開くための、jqueryの中の私のスターターコードです非常にうまくいって、私は関数を '、'で区切ります。

「D-infoが」ドロップメニューのためのクラスである、と「情報」あなたはhoverためhandlerOut機能を使用することができ、ボタンクラス

Answer 1

です。

以下は、これを実証し、1.5秒の遅延後にセクションを非表示にする簡単なスニペットです。

$('.info').hover(function() { 
 
    $('.d-sections').show(500); 
 
}, function() { 
 
    setTimeout(function() { 
 
    $('.d-sections').hide(500); 
 
    }, 1500); 
 
});

.d-sections { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="info"> 
 
    Hover here for more Information! 
 
    <div class="d-sections"> 
 
     <div class="d-skills"> 
 
     The D Skills section! 
 
     </div> 
 
     <div class="d-info"> 
 
     The D Info section! 
 
     </div> 
 
     <div class="d-exp"> 
 
     The D Exp section! 
 
     </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/32bekom9/1/