Динамическое меню с задержкой

86

Radrigo

3 февраля 2016, 13:36

819

У меня на сайте стоит простенькое меню

Код следующий

$(document).ready(function(){

		$('#topmenu li.sublnk').hover(

		function() {

			$(this).addClass("selected");

			$(this).find('ul').stop(true, true);

			$(this).find('ul').show('fast');

		},

		function() {

			$(this).find('ul').hide('fast');

			$(this).removeClass("selected");

		}

	);

});

Подскажите как реализовать небольшую задержку, чтоб при наведении и когда увожу мышку была задержка примерно в 200 миллисекунд, задать время перед раскрытием, и перед закрытием меню.

Пытаюсь использовать setTimeout, но меню вообще перестаёт работать

$(document).ready(function(){

		$('#topmenu li.sublnk').hover(

		setTimeout(function() {

			$(this).addClass("selected");

			$(this).find('ul').stop(true, true);

			$(this).find('ul').show('fast');

		}, 200);

		setTimeout(function() {

			$(this).find('ul').hide('fast');

			$(this).removeClass("selected");

		}, 200);

	);

});

Подскажите что я не так делаю? Или может как-то по другому реализовать?

Заранее признателен за подсказку.

473

eis

3 февраля 2016, 13:46

#1

Radrigo,

$(this).find('ul').show(200);

- Здесь я покупаю вечные ссылки на свои сайты! (https://backlinkator.com) - сотни ссылок за копейки

R

86

Radrigo

3 февраля 2016, 13:54

#2

eis:
Radrigo,

$(this).find('ul').show(200);

К сожалению не то

изменяя значение .show() я задаю время самой анимации при открытии меню, а .hide() я так понимаю это время анимации при раскрытии меню. При использовании ключевого слова fast анимация и так длится 200 миллисекунд

Мне же надо задать время перед раскрытием, и перед закрытием меню, чтоб была задержка перед выполнением функции.

Новый Google+ и Chrome Mozilla выпустила Firefox 40: AdWords перенесёт автоматизированные правила

S3

367

Sly32

3 февраля 2016, 15:17

#3

Radrigo, Почитайте 2 минуты документацию и потом добавьте в css свойство transition и будет вам счастье

E8

28

Earlo87

3 февраля 2016, 15:23

#4

Radrigo:
К сожалению не то

изменяя значение .show() я задаю время самой анимации при открытии меню, а .hide() я так понимаю это время анимации при раскрытии меню. При использовании ключевого слова fast анимация и так длится 200 миллисекунд

Мне же надо задать время перед раскрытием, и перед закрытием меню, чтоб была задержка перед выполнением функции.

.delay(200, function(){$(this).show('fast')})

как то так

R

86

Radrigo

3 февраля 2016, 15:52

#5

Sly32:
Radrigo, Почитайте 2 минуты документацию и потом добавьте в css свойство transition и будет вам счастье

Максимум что мне удалось добиться это задержка смены фона и цвета ссылки при наведении используя transition-delay

Earlo87:

.delay(200, function(){$(this).show('fast')})

как то так

Как именно это прописать?

Такой вариант не работает, меню вообще перестают открываться

$(document).ready(function(){

		$('#topmenu li.sublnk').hover(

		.delay(200, function() {

			$(this).addClass("selected");

			$(this).find('ul').stop(true, true);

			$(this).find('ul').show('fast');

		}),

		

		function() {

			$(this).find('ul').hide('fast');

			$(this).removeClass("selected");

		}

	);

});

E8

28

Earlo87

3 февраля 2016, 17:14

#6

Radrigo:

Как именно это прописать?
Такой вариант не работает, меню вообще перестают открываться

$(document).ready(function(){
		$('#topmenu li.sublnk').hover(
		function() {
			$(this).addClass("selected");
			$(this).find('ul').stop(true, true);
			$(this).find('ul').delay(200).show('fast');
		},
		
		function() {
			$(this).find('ul').delay(200).hide('fast');
			$(this).removeClass("selected");
		}
	);
});

так попробуйте и задержка в 200 мс будет слишком быстрая аозможно вы её незаметите, чтобы было более заметно можно поэксперементировать с временем

R

86

Radrigo

3 февраля 2016, 17:38

#7

Earlo87:

$(document).ready(function(){

		$('#topmenu li.sublnk').hover(

		function() {

			$(this).addClass("selected");

			$(this).find('ul').stop(true, true);

			$(this).find('ul').delay(200).show('fast');

		},

		

		function() {

			$(this).find('ul').delay(200).hide('fast');

			$(this).removeClass("selected");

		}

	);

});

так попробуйте и задержка в 200 мс будет слишком быстрая аозможно вы её незаметите, чтобы было более заметно можно поэксперементировать с временем

Спасибо вам огромное, всё работает=)

Маркетинг для шоколадной фабрики. На 34% выше средний чек

В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов