Добавление таймаута нарушает все

Question

У меня есть 3 кнопки навигации, которые, когда наводили курсор, открывали меню под ним. Я хочу добавить таймер, когда мышь покидает кнопку, поэтому сразу после открытия не закрывается. Тогда это немного испугается. Это мой стартовый код в JQuery, для открытия в раскрывающемся меню

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

Если добавить этот код в нем ломает и ничего не работает

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

Кроме того, я добавить

var t; 

в самом начале, и я разделяю функции с помощью «,».

«d-инфо» класс для раскрывающегося меню и «Информация» кнопка класс

Answer 1

Вы можете использовать функцию handlerOut для hover.

Ниже приведен простой фрагмент, который демонстрирует это и скрывает разделы после задержки 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/