Форум

esergion · #1 (**permalink**) 21.01.2014, 11:49

Добровго времени. Имеется меню на сайте, под ним ссылки на разделы каталога (не спрашивайте зачем). Так вот вывод и скрытие подпунктов меню делается по

$('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();
			}
		);
	});

ksa · #2 (**permalink**) 21.01.2014, 15:09

Сообщение от 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>

esergion · #3 (**permalink**) 22.01.2014, 08:12

Огромное спасибо, ksa!
Как я интуитивно и предполагал, неправильной передается объект в setTimeout.
Благодарю вас еще раз!

greenwar · #4 (**permalink**) 30.06.2016, 15:52

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

greenwar · #5 (**permalink**) 01.07.2016, 19:48

ну и сам же отвечаю:

alert(event.target.getAttribute('data-id'));

data-* это стандарт в HTML5:

<a href='/' data-id='123'>lala</a>

Форум

Справочник

Discord чат

Курсы javascript