Javascript.RU

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

Выполнение кода только один раз в несколько секунд.
Добрый день. Недавно составил несколько строк для плавного раскрывания меню. Всё хорошо работает, только смущает одна вещь - если мышкой много раз провести по элементу, то он будет скакать вверх-вниз столько раз, сколько мы провели по нему мышью. Я пробовал использовать 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>
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2013, 10:36
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от Threaded_Inquisitor
если мышкой много раз провести по элементу, то он будет скакать вверх-вниз столько раз, сколько мы провели по нему мышью
Усиль код методом stop()...

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

Последний раз редактировалось ksa, 15.10.2013 в 10:39.
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2013, 10:49
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

Спасибо за ответ с кодом, но приведённый код отказывается работать. Я попробовал сделать так -
$('.menu li').hover(
    function() {
      $('ul', this).stop().slideDown(400);
    },
    function() {
      $('ul', this).stop().slideUp(400);
    }
  );
});

Такой код делает то, что нужно, но при наведении на элемент раз 5-6 элемент просто не раскрывается.
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2013, 10:58
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

Нужно уменьшить время и всё будет хорошо. Думаю так и оставлю, спасибо большое)
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2013, 11:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

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

Все там работает!
Ответить с цитированием
  #6 (permalink)  
Старый 16.10.2013, 16:11
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

Да, всё работает. Не понимаю... этот код дома работает, а на работе нет... При чём дома кусок кода с
$(".deeper").live("mouseover", function() {
   $('.deeper a').css('color','#707070');
}) 

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

вообще перестал менять цвет. Есть мысль, что это зависит от версии js... Но как тогда что-то писать, если из за таких незначительных изменений может всё накрыться медным тазом?
Ответить с цитированием
  #7 (permalink)  
Старый 16.10.2013, 16:55
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,157

Сообщение от Threaded_Inquisitor
Есть мысль, что это зависит от версии js...
Не JS а jquery.

live() - устаревший метод
on() - новый
Ответить с цитированием
  #8 (permalink)  
Старый 18.10.2013, 09:15
Интересующийся
Отправить личное сообщение для Threaded_Inquisitor Посмотреть профиль Найти все сообщения от Threaded_Inquisitor
 
Регистрация: 15.10.2013
Сообщений: 10

Коду без разницы. Меняю <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 Вам большое спасибо, очень помогли)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При повторении несколько раз animate - рассинхрон... Petja jQuery 4 21.05.2013 12:58
Пошаговое выполнение кода KamalovRadik jQuery 2 28.10.2011 20:46
При выполнение строки кода вылетаю из функции. developer_ Events/DOM/Window 3 28.07.2011 00:45
Выполнение скрипта раз в сутки по cookie Avel Mink Элементы интерфейса 16 29.04.2011 09:38
Последовательное выполнение кода avtor01 AJAX и COMET 6 29.10.2008 19:06