Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2014, 11:49
Новичок на форуме
Отправить личное сообщение для esergion Посмотреть профиль Найти все сообщения от esergion
 
Регистрация: 14.01.2014
Сообщений: 6

Задержка перед появлением второго уровня меню
Добровго времени. Имеется меню на сайте, под ним ссылки на разделы каталога (не спрашивайте зачем). Так вот вывод и скрытие подпунктов меню делается по
$('header nav > div > div').hover(
		function(e) {$(this).children('.hide').fadeIn()},
		function(e) {$(this).children('.hide').fadeOut()}
	);

Но в таком случае проходя через меню курсором на ссылки разделов каталога всплываеют подпункты и скрывают эти самые ссылки.
Решением вопроса была бы задержка перед появлением подменю со сбросом таймера при mouseleave.
Но данный код не работает:
$(document).ready(function(){
		var MenuShowTimer;
		$('header nav > div > div').hover(
			function(e) {
				MenuShowTimer=setTimeout($(this).children('.hide').fadeIn(),1000);
			},
			function(e) {
				clearTimeout(MenuShowTimer);
				$(this).children('.hide').fadeOut();
			}
		);
	});
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2014, 15:09
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,156

Сообщение от esergion Посмотреть сообщение
Но данный код не работает:
$(document).ready(function(){
		var MenuShowTimer;
		$('header nav > div > div').hover(
			function(e) {
				MenuShowTimer=setTimeout($(this).children('.hide').fadeIn(),1000);
			},
			function(e) {
				clearTimeout(MenuShowTimer);
				$(this).children('.hide').fadeOut();
			}
		);
	});
Это не удивительно...

Как вариант

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
body > div {
	float: left;
	margin-right: 10px;
}
div > div {
	display: none;
}
</style>
<script type="text/javascript">
$(function(){
	var MenuShowTimer;
	$('a').hover(
		function(e) {
			MenuShowTimer=setTimeout(
				(function (Obj){
					return function () {
						$(Obj).next().fadeIn();
					};
				})(this)
			,1000)}
		,
		function(e) {
			clearTimeout(MenuShowTimer);
			$(this).next().fadeOut();
		}
	);
});
</script>
</head>
<body>
<div>
	<a href='#'>Item 0</a>
	<div>Text 0</div>
</div>
<div>
	<a href='#'>Item 1</a>
	<div>Text 1</div>
</div>
<div>
	<a href='#'>Item 2</a>
	<div>Text 2</div>
</div>
</body>
</html>

Последний раз редактировалось ksa, 21.01.2014 в 15:14.
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2014, 08:12
Новичок на форуме
Отправить личное сообщение для esergion Посмотреть профиль Найти все сообщения от esergion
 
Регистрация: 14.01.2014
Сообщений: 6

Огромное спасибо, ksa!
Как я интуитивно и предполагал, неправильной передается объект в setTimeout.
Благодарю вас еще раз!
Ответить с цитированием
  #4 (permalink)  
Старый 30.06.2016, 15:52
Профессор
Отправить личное сообщение для greenwar Посмотреть профиль Найти все сообщения от greenwar
 
Регистрация: 19.08.2010
Сообщений: 150

ksa, а что делать, если в одном случае нужна 1000 задержка, а в другом 2000 ?
и если например надо передать что-то в условиях, как это сделать?
при наведении может fancybox открываться, а может тултип вылазить
надо 2 ф-ии держать или может есть смысл без event сделать, а напрямую вызов через mouseover с передачей всех условий?
вот только скилла не хватает переделать listener на mouseover (

Последний раз редактировалось greenwar, 30.06.2016 в 15:54.
Ответить с цитированием
  #5 (permalink)  
Старый 01.07.2016, 19:48
Профессор
Отправить личное сообщение для greenwar Посмотреть профиль Найти все сообщения от greenwar
 
Регистрация: 19.08.2010
Сообщений: 150

ну и сам же отвечаю:
alert(event.target.getAttribute('data-id'));

data-* это стандарт в HTML5:
<a href='/' data-id='123'>lala</a>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задержка свертывания выпадающего меню Сергей123 Элементы интерфейса 11 31.01.2018 15:52
Задержка в выпадающем меню apster Элементы интерфейса 4 22.05.2013 22:05
Задержка перед повтором проигрывания audio Андрей Параничев Firefox/Mozilla 1 20.10.2011 02:51
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
JS-окна второго уровня sobol_noobz Events/DOM/Window 7 24.08.2009 10:28