Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как сделать чтобы выпадающее меню убиралось не сразу (https://javascript.ru/forum/jquery/7875-kak-sdelat-chtoby-vypadayushhee-menyu-ubiralos-ne-srazu.html)

adelante 23.02.2010 19:53

Как сделать чтобы выпадающее меню убиралось не сразу
 
(решил вынести в отдельную тему)

Есть выпадающее меню, оно находится выше родительского на 30 пикселей (абсолютное позиционирование и "top:-30px;"). И вот, наводим на первую менюшку, "выпадает" вторая, неспеша переводим мышку на вторую, но не успеваем, ибо вторая менюшка пропадает.

В общем, попасть в неё (вторую менюшку) -- это целый аттракцион.

Подскажите, как сделать этот процесс более человеческим?
Какую-то паузу в яваскрипт? Или в стилях что-то накрутить?

Сама менюшка здесь: http://romaadelante.ru/t/test.html

sysya 23.02.2010 21:23

сделайте просто с помощью стилей css
ul:hover {display:block;}
, без jquery
эффектов плавных небудет, зато мучиться не надо:)
Или такой вариант выпадения:
в стилях так пишем:
ul {display:block; height:0;}
в скрипте так
$('ul').css('display','block').animate({height:'30px', top:'-30px'}, 300);/*при наведении курсора, а када убираем курсор сами догадайтесь как обратно сделать, всё логично*/

adelante 25.02.2010 15:53

Похоже решил я баг выставлением padding: 15px 0 30px 0; у дочернего ul ;)

правда при этом красивая анимация пропала, ну да и хрен с ней, переживем как-нибудь.

Achilles_sm 02.03.2010 10:13

Можно решить путём выставления скорости анимации. Т.е. в родительском блоке ставим hover(
function () {
$("#dmenu").animate({opacity: "1"}, "slow"); //дочерний блок появляется при наведении
$("#dmenu").animate({opacity: "1"}, 5000) //дочерний блок висит 5 секунд
},
function () {
$("#dmenu").animate({opacity: "0"}, "slow"); // дочерний блок гаснет
});

Вся анимация для одного (дочернего в данном случае) элемента выполняется в одной очереди. Поэтому гаснуть блок начнёт только после того, как провисит 5 секунд. Думаю, что этого достаточно для того, чтобы на него попасть мышкой =) Конечно, надо добавить, что при наведении на дочерний блок opacity будет оставаться единицей... Для этого можно сделать clearQueue при наведении на него или stop(). На Ваш выбор...


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