Как реализовать задержку при наведении в меню?
 

Написал кое-как меню:

$('.menuholder').hover(function()
		{$('.back')
		.animate({"height":"500px"},'1000');
		//.css("height","500px");
	}, function () {
			$('.back')
			.animate({"height":"0px"},'100')
			;});
	$('.menu li').hover(function(){
		$('div.subs div.dl').stop().delay(1000).animate({"marginLeft":"10px"},'2500');
			$('div.back')/*.delay(100)*/
			.animate({"height":"500px"},'1000')
			//.css('height','500px')
			;
		}, function(){
			$('div.subs div.dl').css('marginLeft','-1000px');$('div.back')
			.animate({"height":"0px"},'100')
			;});
});

Само меню отрисовывается так:

<?php if ($categories) {?>
<div class="menuholder">
  <ul class="menu slide">
  <?php foreach ($categories as $category) { ?>
  <li><a href="<?php echo $category['href']; ?>" class="orange"><h2><?php echo $category['name']; ?></h2></a>
    <?php if ($category['children']) { ?>
      <?php for ($i = 0; $i < count($category['children']);) { ?>
      <div class="subs">
        <div class="dl">
            <?php for ($i = 0; $i < count($category['children']); $i++) { ?>
              <?php if (isset($category['children'][$i])) { ?>
              <div class="item">
                <div><a href="<?php echo $category['children'][$i]['href']; ?>"><img alt="<?php echo $category['children'][$i]['name']; ?>" src="<?php echo $category['children'][$i]['image']?>"></a></div>
                <div class="link"><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></div>
              </div>
              <?php } ?>
          <?php } ?>
        </div>
      </div>
      <?php } ?>
    <?php } ?>
  <?php } ?>
  </li>
  </ul>
<div class="back"></div>
</div>

так вот вопрос таков - как реализовать то, чтобы при наведении на пункт меню, оно появлялось с задержкой. То есть при случайном наведении оно не выскакивало, а требовало наведенного курсора примерно одну секунду?

при hover установить setTimeout(function(){ваша функция}, 1000), если hover теряется, то делать clearTimeout()

Собственно думаю вопрос в "туда-сюда" дергании анимации, а не именно задержки, для этого используем не hover, а

$(Селектор).mouseenter(function(){
     //Код

}).mouseleave(function(){
     //Код
});

в этом случаем при проведении курсора мимо меню, будет дёргаться выпадающий список из меню. При установки задержки хотя бы на 500 миллисекунд, мы избавляемся от дёрганья.

$(Селектор).mouseenter(function(){
     //Код setTimeout
}).mouseleave(function(){
     //Код clearTimeout
});

Sober_exe,
Тестовик - есть ? Глянуть?

тестовика нет, ссылка на сайт - http://belakvamir.by

поменял hover на mouseenter/mouseleave - все работает, но при добавлении setTimeout и clearTimeout - скрипт отказывается работать вообще... буду разбираться скорее всего в синтаксисе что-то упускаю. Только осваиваю JS.

Неудачно организовано
1. Темное полотно фона должно появляться при наведении на обший родитель подменю (по-моему .menuholder );
2. По наведению на li, на уже поставленном темном фоне появляются картинки
3. Картинки не должны выезжать слева! - это Г
Либо вообще не выезжают ( чисто fadeIn) либо выезжают из под клавиш (slideDown)

Спасибо, сделал на fadein. Прошу помощи с задержкой подскажите подробнее как именно следует вставить задержку? а то если провести вдоль меню, то оно открывает .back столько раз, по скольким пунктам меню прошел курсор.

И посоветуйте как более рационально сделать открытие меню по щелчку, а закрытие на mouseleave? Если это возможно.

Stas-ik,
Еще раз: - Перенесите открытие темного фона по наведению(.mouseenter/mouseleave) на родитель!!
(<div class="menuholder"> или <ul class="menu slide">)

На li только квадраты с инвентарем! )без фона

Это при наведении

function openMenu(){
	$('.back').animate({"height":"500px"},'1000');
}
$('.menuholder').mousenter(function(){
	timeout = setTimeout(openMenu, 500);
});

$('.menuholder').mouseleave(clearTime(function(){
	clearTimeout(timeout);
}),500);

Это по клику:

<div class="menuholder" onclick(openMenu());>...</div>

function openMenu(){
	$('.back').animate({"height":"500px"},'1000');
}
function closeMenu(){
	$('.back').animate({"height":"0px"},'1000');
}
$('.menuholder').mouseleave(closeMenu());

Ну и измените с учётом правок Deff

Sober_exe,
Сделано не верно - фон должен быть при наведении на само меню, а не на конкретный пункт
у Вас же он убирается при переходе с пункта на пункт(а курсор находиться в меню
Т.е анимации две
1. Для наведения на контейнер с Li = показываем тёмный фон
2. При наведении на конкретный Li - открываем ивентарь(фона там у же нет, он открыт на родителе)

Deff, я не влезал в то КАК это должно отображаться, а показал как написать скрипт, если не тупо копипастить, то схема понятна и поменять на своё. Я даже дописал, что с учётом правок ваших.

$('.listdelay').click(function(){
        $(this).addClass('onhover2').addClass('onhover');
    })
    $('.listdelay').hover(
        function(){
            var List = $(this);
            $(this).addClass('onhover2');
            setTimeout(function(){
                if ( List.hasClass("onhover2") ) {
                    List.addClass('onhover');
                }
            }, 300);

        },
        function(){
            var List = $(this);
            List.removeClass('onhover');
            List.removeClass('onhover2');
        });

соответстственно, показ нужного элемента можно сделать так:
.onhover.onhover2 div{
display :block;
}