Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2013, 19:11
Новичок на форуме
Отправить личное сообщение для Stas-ik Посмотреть профиль Найти все сообщения от Stas-ik
 
Регистрация: 30.01.2013
Сообщений: 5

Как реализовать задержку при наведении в меню?
Написал кое-как меню:
$('.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>

так вот вопрос таков - как реализовать то, чтобы при наведении на пункт меню, оно появлялось с задержкой. То есть при случайном наведении оно не выскакивало, а требовало наведенного курсора примерно одну секунду?
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2013, 16:39
Интересующийся
Отправить личное сообщение для Sober_exe Посмотреть профиль Найти все сообщения от Sober_exe
 
Регистрация: 27.02.2012
Сообщений: 18

при hover установить setTimeout(function(){ваша функция}, 1000), если hover теряется, то делать clearTimeout()
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2013, 16:57
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Собственно думаю вопрос в "туда-сюда" дергании анимации, а не именно задержки, для этого используем не hover, а
$(Селектор).mouseenter(function(){
     //Код

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

Последний раз редактировалось Deff, 06.02.2013 в 16:59.
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2013, 17:08
Интересующийся
Отправить личное сообщение для Sober_exe Посмотреть профиль Найти все сообщения от Sober_exe
 
Регистрация: 27.02.2012
Сообщений: 18

в этом случаем при проведении курсора мимо меню, будет дёргаться выпадающий список из меню. При установки задержки хотя бы на 500 миллисекунд, мы избавляемся от дёрганья.
$(Селектор).mouseenter(function(){
     //Код setTimeout
}).mouseleave(function(){
     //Код clearTimeout
});
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2013, 17:55
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Sober_exe,
Тестовик - есть ? Глянуть?
Ответить с цитированием
  #6 (permalink)  
Старый 07.02.2013, 11:38
Новичок на форуме
Отправить личное сообщение для Stas-ik Посмотреть профиль Найти все сообщения от Stas-ik
 
Регистрация: 30.01.2013
Сообщений: 5

тестовика нет, ссылка на сайт - http://belakvamir.by
Ответить с цитированием
  #7 (permalink)  
Старый 07.02.2013, 11:42
Новичок на форуме
Отправить личное сообщение для Stas-ik Посмотреть профиль Найти все сообщения от Stas-ik
 
Регистрация: 30.01.2013
Сообщений: 5

поменял hover на mouseenter/mouseleave - все работает, но при добавлении setTimeout и clearTimeout - скрипт отказывается работать вообще... буду разбираться скорее всего в синтаксисе что-то упускаю. Только осваиваю JS.
Ответить с цитированием
  #8 (permalink)  
Старый 07.02.2013, 12:24
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Сообщение от Stas-ik
тестовика нет, ссылка на сайт - http://belakvamir.by
Неудачно организовано
1. Темное полотно фона должно появляться при наведении на обший родитель подменю (по-моему .menuholder );
2. По наведению на li, на уже поставленном темном фоне появляются картинки
3. Картинки не должны выезжать слева! - это Г
Либо вообще не выезжают ( чисто fadeIn) либо выезжают из под клавиш (slideDown)
Ответить с цитированием
  #9 (permalink)  
Старый 07.02.2013, 13:58
Новичок на форуме
Отправить личное сообщение для Stas-ik Посмотреть профиль Найти все сообщения от Stas-ik
 
Регистрация: 30.01.2013
Сообщений: 5

Сообщение от Deff Посмотреть сообщение
Неудачно организовано
1. Темное полотно фона должно появляться при наведении на обший родитель подменю (по-моему .menuholder );
2. По наведению на li, на уже поставленном темном фоне появляются картинки
3. Картинки не должны выезжать слева! - это Г
Либо вообще не выезжают ( чисто fadeIn) либо выезжают из под клавиш (slideDown)
Спасибо, сделал на fadein. Прошу помощи с задержкой подскажите подробнее как именно следует вставить задержку? а то если провести вдоль меню, то оно открывает .back столько раз, по скольким пунктам меню прошел курсор.
Ответить с цитированием
  #10 (permalink)  
Старый 07.02.2013, 14:34
Новичок на форуме
Отправить личное сообщение для Stas-ik Посмотреть профиль Найти все сообщения от Stas-ik
 
Регистрация: 30.01.2013
Сообщений: 5

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подружить два скрипта (скроллер+скрипт эффекта при наведении) Che jQuery 26 29.08.2012 10:59
Аккордеон меню, как доработать код. Gawk Общие вопросы Javascript 1 23.07.2012 13:01
CSS меню => скрыть при нажатии Shasoft Элементы интерфейса 1 15.05.2012 20:01
Как реализовать карту "При наведении мышки на зону подсвечивать соответствующий линк" Моряк Папай Элементы интерфейса 0 10.08.2011 22:42
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55