Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   задержка выпадания меню при наведении (https://javascript.ru/forum/dom-window/66944-zaderzhka-vypadaniya-menyu-pri-navedenii.html)

Maklerfox 19.01.2017 12:36

задержка выпадания меню при наведении
 
Добрый день.
Всю голову сломал. Подскажите пожалуйста как сделать выпадание меню с задержкой. Скрипт готов без задержки и работает. А как добавить задержку голову сломал.

this.setHandlersNotMobile = function(){
		menu.on('mouseenter.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			var submenu = _.children('.submenu-wrap');
			if ( _.hasClass('opened') ){
				submenu.velocity('stop').velocity('reverse');
				//$('body').addClass('darken');
				return false;
			}
			submenu.addClass('opened'),
			setTimeout(function(){
				if (typeof initHCarousel === 'function') submenu.find('.scroll-slider-wrap').each(initHCarousel);
			}, 50);
		}).on('mouseleave.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			var submenu = _.children('.submenu-wrap');
			submenu.removeClass('opened');
		}).on('hitstoggle', function(e, data){
			if ( data.type === 'show' && typeof initHCarousel === 'function' ){
				data.wrap.each(initHCarousel);
			}
		});
	}

serj0110 19.01.2017 13:08

Цитата:

Сообщение от Maklerfox (Сообщение 441381)
Добрый день.
Всю голову сломал. Подскажите пожалуйста как сделать выпадание меню с задержкой. Скрипт готов без задержки и работает. А как добавить задержку голову сломал.

this.setHandlersNotMobile = function(){
		menu.on('mouseenter.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			var submenu = _.children('.submenu-wrap');
			if ( _.hasClass('opened') ){
				submenu.velocity('stop').velocity('reverse');
				//$('body').addClass('darken');
				return false;
			}
			submenu.addClass('opened'),
			setTimeout(function(){
				if (typeof initHCarousel === 'function') submenu.find('.scroll-slider-wrap').each(initHCarousel);
			}, 50);
		}).on('mouseleave.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			var submenu = _.children('.submenu-wrap');
			submenu.removeClass('opened');
		}).on('hitstoggle', function(e, data){
			if ( data.type === 'show' && typeof initHCarousel === 'function' ){
				data.wrap.each(initHCarousel);
			}
		});
	}

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

Maklerfox 19.01.2017 13:17

Это немного не то. В выпадающем меню есть еще блок раскрывающийся с кнопки. Это и есть задержка по этому блоку. А вот по меню нет.

serj0110 19.01.2017 13:54

Цитата:

Сообщение от Maklerfox (Сообщение 441392)
Это немного не то. В выпадающем меню есть еще блок раскрывающийся с кнопки. Это и есть задержка по этому блоку. А вот по меню нет.

Так сделай
setTimeout(function() {
А сюда свою функцию, если произошло наведение на кнопку меню
}, 1000);
:)

Maklerfox 19.01.2017 14:15

Цитата:

Сообщение от serj0110 (Сообщение 441395)
Так сделай
setTimeout(function() {
А сюда свою функцию, если произошло наведение на кнопку меню
}, 1000);
:)

В какое место это вставить? Все перпробовал

serj0110 19.01.2017 14:27

Цитата:

Сообщение от Maklerfox (Сообщение 441399)
В какое место это вставить? Все перпробовал

Я подозреваю что это не весь код, либо я чего-то не понимаю, не спец ещё в этом, попробуй на всю приведенную функцию сделать setTimeout
P.S. я слегка иначе всё пишу, так что сложновато понять чужой код :)

Maklerfox 19.01.2017 14:29

делал на всю функцию))) Не помогает)))

serj0110 19.01.2017 14:43

Цитата:

Сообщение от Maklerfox (Сообщение 441402)
делал на всю функцию))) Не помогает)))

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

Maklerfox 19.01.2017 14:57

Цитата:

Сообщение от serj0110 (Сообщение 441404)
Покажи строку кода, где задаешь событие при наведении указателя на кнопку.

пробовал даже методом тыка. Тишина.

А так мое видение было таким

this.setHandlersNotMobile = function(){
		menu.on('mouseenter.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			setTimeout(function(){
			var submenu = _.children('.submenu-wrap');
			if ( _.hasClass('opened') ){
				submenu.velocity('stop').velocity('reverse');
				//$('body').addClass('darken');
				return;
			}
			submenu.addClass('opened')
			}, 500);
			setTimeout(function(){
				if (typeof initHCarousel === 'function') submenu.find('.scroll-slider-wrap').each(initHCarousel);
			}, 50);
		}).on('mouseleave.mainMenu', '.catalog-menu-lvl0-item', function(){
			var _ = $(this);
			var submenu = _.children('.submenu-wrap');
			submenu.removeClass('opened');
		}).on('hitstoggle', function(e, data){
			if ( data.type === 'show' && typeof initHCarousel === 'function' ){
				data.wrap.each(initHCarousel);
			}
		});
	}

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

serj0110 19.01.2017 15:18

Цитата:

Сообщение от Maklerfox (Сообщение 441405)
При таком исполнении резко проводя по меню оно появлятся но не убирается. Нужно навести на какое то время что бы пропало.

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


Часовой пояс GMT +3, время: 04:32.