Как добавить задержку добавления класса при наведении на ссылку?

Question

[Дмитрий Грабко]

Доброго времени суток.

На сайте реализовано выпадающее меню. При наведении на основной пункт появляется подменю.

Нужно сделать задержку появления, для того, чтобы пункты не перескакивали при быстром перемещении курсора.

Собственно код:

var intervalId;
    $('.submenu li').hover(
    	function(){
    		intervalId=setTimeout( function(){$(this).children('.section-block-submenu').addClass('hover-submenu') }, 100);
    		console.log(intervalId);
    	},
	    	function(){
	    		$(this).children('.section-block-submenu').removeClass('hover-submenu');
	    		clearTimeout(intervalId);
	    	}
    	);

Но таймер даже не обновляется после перемещения курсора с элемента меню

Фрагмент меню на сайте:

<ul>
	<li><a href="/catalog/">Каталог товаров</a>
	<div class="submenu">
	        	<ul>
			<li>
			<a class="" href="/catalog/kirpich/">КИРПИЧ</a>
			<div class="section-block-submenu"><h3>КИРПИЧ</h3>
<ul>
	<li>

Comments

[Ilya]

Я бы на твоём месте через mouseenter mouseleave делал