Как выполнить метод css() с задержкой?

Question

[itnan]

$(document).ready(function() {

	$("#courses").hover(function() {             
    	$("#coursesHeader").css({'display': 'block'});
    }, 
    function() {          
    	$("#coursesHeader").css({'display': 'none'});
    });
});

Как сделать так, чтобы метод css с display none выполнился с задержкой? delay пробовал ставить в конце - не работает. Других способов не нашёл, помогите пожалуйста

Answer 1

[0xD34F]

$('#courses').hover(function() {
  $('#coursesHeader').dequeue().show();
}, function() {          
  $('#coursesHeader').delay(1000).queue(function() {
    $(this).hide().dequeue();
  });
});

или

let timeout = null;

$('#courses').hover(function() {
  clearTimeout(timeout);
  $('#coursesHeader').show();
}, function() {          
  timeout = setTimeout(() => $('#coursesHeader').hide(), 1000);
});

Answer 2

[Артем Спиридонов]

$(document).on('mouseover', '#coursesHeader', function() {
	$(this).hide();
	setTimeout(function() {
		$('#coursesHeader').show();
	}, 1000);
});