Форум

Hurray · #1 (**permalink**) 24.03.2014, 22:56

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

$(".h_menu li").mouseenter(function(){
		var that = this;
		glt = setTimeout(function() { 
			var num=$(that).index();
			if (num>0) {
				$(".hpop_item").stop();
				$(".hpop").stop();

				num--;
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();

				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().animate({height:he},300);
				$item.stop().fadeIn(300);
			}
			else {
				if($(".hpop_item").is(":visible")) {
					hpopclose();
				}
			}		
}, 500)
	});
// если убрать курсор с пункта меню, таймер уничтожается
  $(".h_menu li").onmouseout = function() {
    clearTimeout(glt); 
  }

рони · #2 (**permalink**) 24.03.2014, 23:08

Hurray,
возможно вы на другом Li или если запустилась анимация то clearTimeout её неостановит

Hurray · #3 (**permalink**) 25.03.2014, 10:33

Сообщение от рони

Hurray,
возможно вы на другом Li или если запустилась анимация то clearTimeout её неостановит

Какие можете предложить альтернативные способы решения проблемы? Как можно с помощью условия if проверить, находится курсор на элементе или нет?

рони · #4 (**permalink**) 25.03.2014, 11:02

Hurray,
макет нужен вашего меню

Hurray · #5 (**permalink**) 25.03.2014, 21:37

Сообщение от рони

Hurray,
макет нужен вашего меню

<nav class="h_menu">
				<ul>
					<li class="
h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
			</nav>
<div style="height: 0px; overflow: hidden;" class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>	
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2		
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3		
	</div>	
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4		
	</div>		
</div>

рони · #6 (**permalink**) 25.03.2014, 22:48

Hurray, ошибка у вас в 25 строке = вместо ()
ну и как вариант

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style type="text/css">
  .hpop_item{
    background-color: #FFA500;
    height: 100px
  }

  </style>
</head>

<body>
<nav class="h_menu">
				<ul>
					<li class="h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
			</nav>
<div style="height: 0px; overflow: hidden;" class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4
	</div>
</div>
<script>var glt;
    var $menu = $(".h_menu .h_menu_i")
    $menu.mouseenter(function(){
        var num = $menu.index(this);
		glt = setTimeout(function() {
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();
				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().css({height:0}).animate({height:he},300);
				$item.stop().fadeIn(300);
}, 500)
	});
// если убрать курсор с пункта меню, таймер уничтожается
  $(".h_menu .h_menu_i").mouseleave(  function() {
    $(".hpop_item").stop(true,true).fadeOut(100);
    clearTimeout(glt);
  })

</script>
</body>

</html>

Hurray · #7 (**permalink**) 26.03.2014, 10:36

Спасибо огромное! Всё работает.
А как сделать, чтобы вкладка не сворачивалась, если курсор находится над нею, то есть если передвинули курсор с пункта меню на вкладку? Сворачиваться вкладка должна только в том случае, если курсор покинул и $(".h_menu .h_menu_i") и $(".hpop_item").

$(".h_menu .h_menu_i").mouseleave(  function() {
    $(".hpop_item").stop(true,true).fadeOut(100);
    clearTimeout(glt);
  })

рони · #8 (**permalink**) 26.03.2014, 11:11

Hurray,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <style type="text/css">
  .hpop_item{
    background-color: #FFA500;
    height: 100px
  }
  .h_menu_i{
       display: block;
       width:  25%;
       float: left;
  }

  </style>
</head>

<body>
<nav class="h_menu">
				<ul>
					<li class="h_menu-now">
						<div class="logo">
							<a href="/" title="Indian Ocean">
								<span>Indian<b>Ocean</b></span>
								<p>сайт туристической компании Dek Travel</p>
							</a>
						</div>
					</li>
					<li class="h_menu_i h_menu_i-1
"><a href="/seychelles/"><span>Сейшельские</span> острова</a></li>
					<li class="h_menu_i h_menu_i-2
"><a href="/mauritius/">остров <span>Маврикий</span></a></li>
					<li class="h_menu_i h_menu_i-3
"><a href="/maldives/">острова <span>Мальдивы</span></a></li>
					<li class="h_menu_i h_menu_i-4
"><a href="/сountrys/">другие <span>Страны</span></a></li>
				</ul>
            </nav>&nbsp;
<div style="height: 0px; overflow: hidden; " class="hpop list">
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 1
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 2
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 3
	</div>
	<div style="display: none; opacity: 1;" class="hpop_item">
		Выпадающая вкладка 4
	</div>
</div>
<script>
    var glt;
    var $menu = $(".h_menu .h_menu_i")
    $menu.mouseenter(function(){
        var num = $menu.index(this);
        clearTimeout(glt);
		glt = setTimeout(function() {
				var $item=$(".hpop_item").eq(num);
				var he=$item.height();
				$(".hpop_item").stop(true,true).fadeOut(100);
				$(".hpop").stop().css({height:0}).animate({height:he},300);
				$item.stop().fadeIn(300);
}, 500)
	});
  $(".hpop_item").mouseenter(function(){clearTimeout(glt)})
  $(".h_menu .h_menu_i, .hpop_item").mouseleave(  function() {
    clearTimeout(glt);
    glt = setTimeout(function() {
    $(".hpop_item").stop(true,true).fadeOut(100);},500)
  })
</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript