Зависание горизонтально выпадающего подменю.

[Killerblade]

В общем такая проблема:

Написал этот код CSS:

<div class="section-top-menu-content">
			 <ul>
				 <li><a href="#">Главная</a><span></span></li>
				 <li class="activ">
					 <a href="#">Каталог<span class="arrow"></span></a><span></span>
					 <div class="section-top-menu-sub">
						 <a href="#">Шины</a>
						 <a href="#">Диски</a>
						 <a href="#">Аккумуляторы</a>
						 <a href="#">Элементы крепления</a>
					 </div>
				 </li>
				 <li><a href="#">Акции</a><span></span></li>
				 <li><a href="#">Новости</a><span></span></li>
				 <li><a href="#">Информация</a><span></span></li>
				 <li><a href="#">Вакансии <span></span></a></li>
				 <li >
					 <a href="#">О компании<span class="arrow"></span></a><span></span>
					 <div class="section-top-menu-sub">
						 <a href="#">Самый большой текст с вакансиями</a>
						 <a href="#">Еще один самый большой большой текст</a>
						 <a href="#">В 1940 году в небе над Австралией столкнулись </a>
						 <a href="#">Морально устал – хочу отдохнуть аморально.</a>
						 <a href="#">Мозги,конечно не видны,но когда их не хватает,заметно</a>
						 <a href="#">Женская логика — «Лучше по-хорошему скажи, иначе я сама додумаю, хуже будет!»</a>
						 <a href="#">Элементы крепления</a>
					 </div>
				 </li>
				 <li>
					 <a href="#">Контакты<span class="arrow"></span></a><span></span>
					 <div class="section-top-menu-sub">
						 <a href="#">Самый большой текст с вакансиями</a>
						 <a href="#">Еще один самый большой большой текст</a>
						 <a href="#">В 1940 году в небе над Австралией столкнулись </a>
						 <a href="#">Морально устал – хочу отдохнуть аморально.</a>
						 <a href="#">Мозги,конечно не видны,но когда их не хватает,заметно</a>
						 <a href="#">Женская логика — «Лучше по-хорошему скажи, иначе я сама додумаю, хуже будет!»</a>
						 <a href="#">Элементы крепления</a>
					 </div>
				 </li>
			 </ul>
		 </div>
	 </div>

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

И написал код JQ:

$(".section-top-menu-content li").hover(
	 function () {$(this).find(".section-top-menu-sub").stop(false, true).slideDown('fast');},
	 function () {$(this).find(".section-top-menu-sub").stop(false, true).fadeOut('fast');}
);

После чего все замечательно работало. Но когда я сверху быстро переношу фокус на подменю, оно почему то начинает мигать. В общем Получается очень не красиво.

Може кто сталкивался с такой проблемой ? Был бы очень рад вашей помощи.

Edited August 12, 2013 by Killerblade

[Switch74]

а где CSS?

обычно мигание бывает, если размеры объекта при наведении изменяются или какие-то объекты перекрываются другими

а вообще чтобы понять что там, нужно посмотреть в живую бы

[CoDy]

Если я правильно понял, мигание это "холостое" открытие и закрытие подменю, когда быстро двигается курсор. Может попробовать поставить задержку открытия подменю. То есть подменю будет показано если курсор стоит на ним, например, 100-200 мс.

[Switch74]

если из-за того, что быстро мышкой двигать туды-сюды мигает, то stop() достаточно

[Killerblade]

Да да... .stop() - за рулило конкретно. И так... сейчас расскажу суть моего утреннего мозгового штурма.

Первый штурм начался еще далеко за неделю до того пока мне не сказали исправить этот баг. Код был выше указанный.

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

$(".section-top-menu-content li").hover( function () {$(this).find(".section-top-menu-sub").stop(false, true).slideDown('fast');}, function () {$(this).find(".section-top-menu-sub").stop(false, true).fadeOut('fast');} );

для двух сотояний стопаю анимацию.

Выход был найден используя следующий код

    $(".section-top-menu-content li").hover(
	    function () {
		    $(this).find(".section-top-menu-sub").stop(true, true);
		    $(this).find(".section-top-menu-sub").slideDown('fast');
	    },
	    function () {
		    $(this).find(".section-top-menu-sub").slideUp('fast');
	    }
    );

Это один вариант решения этой задачи... потом пошло по накатанной и я придумал еще одни способ решения проблемы с миганием.

    $(".section-top-menu-content li").hover(
	    function () {
		    $(this).find(".section-top-menu-sub").stop(true, true);
		    $(this).find(".section-top-menu-sub").slideDown('fast');
	    },
	    function () {
		[color=#ff0000]    $(this).find(".section-top-menu-sub").stop(true, false);[/color]
		    $(this).find(".section-top-menu-sub").slideUp('fast');
	    }
    );

Расскажу в чем отличие первого варианта от второго.

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

Второй вариант, помогает от задротов порыхлить бугорок на таких ссылках. Он в обще не дает вам побаловаться открытием drop пока вы всерьез не остановитесь на нем. Иначе просто при простом проведении курсора, он лишь превстанет и по уведению курсора упадет.