JQuery анимировать подменю при наведении не гладко - PullRequest
Новая
       30

JQuery анимировать подменю при наведении не гладко

2 голосов
/ 22 апреля 2011

Я занимаюсь разработкой навигационной панели с подменю.При загрузке страницы полосы загрузки и подменю скрыты.Когда вы наводите курсор мыши на ссылку, в подменю создается анимация. Я подготовил весь свой код в jsfiddel здесь: http://jsfiddle.net/6cAaN/

Как видите, он работает довольно хорошо;однако не идеально.Это немного глючит.Любые идеи, как я могу обострить следующий jquery, чтобы сделать эффект наведения более плавным и лучше функционировать?

Вот jquery: 

$("#menu-nav ul:first").css({"opacity":"0"});

    $("#menu-nav li").hover(function(){
         $(this).find('ul:first').stop().show().animate({
            "top" : "42px",
            "opacity" : "1"
         }, 300); 

    },function(){ 
        $(this).find('ul:first').stop().animate({
            "top" : "0",
            "opacity" : "0"
        });

});

Любая помощь будет отличной!

Ответы [ 3 ]

1 голос
/ 22 апреля 2011

Одна вещь, которую вы можете сделать, чтобы сжать существующий код как есть: под <li> и над выпадающим списком <ul> есть пробел.Там, где вы установили "top" : "42px", это создает пробел, к которому не прикреплено событие hover, поэтому он заставляет выпадающий «трястись», когда пытается скрыть / отобразить одновременно.свойство top, просто измените его на padding-top в каждом случае.Это делает его намного более плавным и «доступным».

http://jsfiddle.net/Madmartigan/6cAaN/8/

1 голос
/ 22 апреля 2011

  1. Я бы применил заполнение к #menu-nav LI вместо #menu-nav Это увеличит область отклика при наведении.

  2. Я бы добавил z-index: -1 к классу .sub-menu, чтобы он не отображался в верхней части строки меню.

  3. Я бы изменил .sub-menu li на .sub-menu a и добавил бы display: block - это сделает всю кнопку подменю доступной для щелчка вместо ссылки.

Как подсказал Юрий, hoverIntent - хорошая опция для контроля чувствительности мыши и ошибок пользователя.

Всего несколько идей.

0 голосов
/ 22 апреля 2011

Попробуйте использовать hoverintent плагин вместо hover. http://cherne.net/brian/resources/jquery.hoverIntent.html

...