Как сделать чтобы выпадающее меню убиралось не сразу
(решил вынести в отдельную тему)
Есть выпадающее меню, оно находится выше родительского на 30 пикселей (абсолютное позиционирование и "top:-30px;"). И вот, наводим на первую менюшку, "выпадает" вторая, неспеша переводим мышку на вторую, но не успеваем, ибо вторая менюшка пропадает. В общем, попасть в неё (вторую менюшку) -- это целый аттракцион. Подскажите, как сделать этот процесс более человеческим? Какую-то паузу в яваскрипт? Или в стилях что-то накрутить? Сама менюшка здесь: http://romaadelante.ru/t/test.html |
сделайте просто с помощью стилей css
ul:hover {display:block;}, без jquery эффектов плавных небудет, зато мучиться не надо:) Или такой вариант выпадения: в стилях так пишем: ul {display:block; height:0;}в скрипте так $('ul').css('display','block').animate({height:'30px', top:'-30px'}, 300);/*при наведении курсора, а када убираем курсор сами догадайтесь как обратно сделать, всё логично*/ |
Похоже решил я баг выставлением padding: 15px 0 30px 0; у дочернего ul ;)
правда при этом красивая анимация пропала, ну да и хрен с ней, переживем как-нибудь. |
Можно решить путём выставления скорости анимации. Т.е. в родительском блоке ставим 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, время: 21:10. |