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

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

$('.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? Если это возможно.