Форум

Threaded_Inquisitor · #1 (**permalink**) 15.10.2013, 10:25

Добрый день. Недавно составил несколько строк для плавного раскрывания меню. Всё хорошо работает, только смущает одна вещь - если мышкой много раз провести по элементу, то он будет скакать вверх-вниз столько раз, сколько мы провели по нему мышью. Я пробовал использовать setTimeout, но код вообще на него не реагировал. В общем прошу помочь мне и сделать замечания, если что-то сделано неверно и можно сделать лучше. Спасибо за внимание.

<script type="text/javascript">
$(document).ready(function () {

  $('.menu li').hover(
    function() {
      $('ul', this).slideDown(400);
    },
    function() {
      $('ul', this).slideUp(400);
    }
  );
});


$(".deeper").live("mouseover", function() {
   $('.deeper a').css('color','#707070');
}) 

$(".menu").live("mouseout", function() {
   $('.deeper a').css('color','#ffffff');
}) 

</script>

ksa · #2 (**permalink**) 15.10.2013, 10:36

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

если мышкой много раз провести по элементу, то он будет скакать вверх-вниз столько раз, сколько мы провели по нему мышью

Усиль код методом stop()...

$('.menu li').hover(
    function() {
      $(this).find('ul').stop().slideDown(400);
    },
    function() {
      $(this).find('ul').stop().slideUp(400);
    }
  );

Threaded_Inquisitor · #3 (**permalink**) 15.10.2013, 10:49

Спасибо за ответ с кодом, но приведённый код отказывается работать. Я попробовал сделать так -

$('.menu li').hover(
    function() {
      $('ul', this).stop().slideDown(400);
    },
    function() {
      $('ul', this).stop().slideUp(400);
    }
  );
});

Такой код делает то, что нужно, но при наведении на элемент раз 5-6 элемент просто не раскрывается.

Threaded_Inquisitor · #4 (**permalink**) 15.10.2013, 10:58

Нужно уменьшить время и всё будет хорошо. Думаю так и оставлю, спасибо большое)

ksa · #5 (**permalink**) 15.10.2013, 11:50

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

Спасибо за ответ с кодом, но приведённый код отказывается работать.

Врать-то зачем?

<!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">
.menu > li > ul {
	display: none;
}
</style>
<script type="text/javascript">
$(function (){
	$('.menu li').hover(
		function() {
			$(this).find('ul').stop().slideDown(400);
		},
		function() {
			$(this).find('ul').stop().slideUp(400);
		}
	);
});
</script>
</head>
<body>
<ul class='menu'>
	<li>Item 1
		<ul>
			<li>Item 1 1</li>
			<li>Item 1 2</li>
			<li>Item 1 3</li>
		</ul>
	</li>
	<li>Item 2
		<ul>
			<li>Item 2 1</li>
			<li>Item 2 2</li>
			<li>Item 2 3</li>
		</ul>
	</li>
</ul>
</body>
</html>

Все там работает!

Threaded_Inquisitor · #6 (**permalink**) 16.10.2013, 16:11

Да, всё работает. Не понимаю... этот код дома работает, а на работе нет... При чём дома кусок кода с

$(".deeper").live("mouseover", function() {
   $('.deeper a').css('color','#707070');
}) 

$(".menu").live("mouseout", function() {
   $('.deeper a').css('color','#ffffff');
})

вообще перестал менять цвет. Есть мысль, что это зависит от версии js... Но как тогда что-то писать, если из за таких незначительных изменений может всё накрыться медным тазом?

ksa · #7 (**permalink**) 16.10.2013, 16:55

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

Есть мысль, что это зависит от версии js...

Не JS а jquery.

live() - устаревший метод
on() - новый

Threaded_Inquisitor · #8 (**permalink**) 18.10.2013, 09:15

Коду без разницы. Меняю <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> на <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> или "latest" и перекраска текста не работает. Хоть я там .on ставлю, хоть нет. К стати ksa Вам большое спасибо, очень помогли)

Форум

Справочник

Discord чат

Курсы javascript