JQuery Анимация раскрывающегося меню css ul display: проблема с блоком

0

Я пытаюсь добавить простую анимацию в меню css http://jsfiddle.net/BGV2Z/2/

Кажется, что проблема заключается в отображении: block; , Если вы набираете меню в первый раз, то отлично, на мышином плеере исчезающее меню появляется снова в крайнем левом положении или в верхнем положении (в зависимости от уровня).

    $("li").on('mouseenter', function () {

        $(this).find('ul').first().css('display', 'none').fadeIn(500, function () {

            $(this).css('display', 'block');

        });

    }).on('mouseleave', function () {

        $(this).find('ul').first().fadeOut(500, function () {

            $(this).css('display', 'none');

        });
    });

Я пропускаю что-то очевидное, любая помощь приветствуется. Спасибо!

Теги:
drop-down-menu

2 ответа

2
Лучший ответ

Добавить position: relative; к вашему CSS для ul.dropdown li

ul.dropdown li {
    float: left;
    min-height: 1px;
    vertical-align: middle;
    margin:0 5px;
    display:block;
    position: relative;
}
  • 1
    Хорошая находка! Чем ты!
1

Вы можете сделать это без необходимости jQuery и использовать анимацию CSS3 :)

Просто добавьте анимацию transition, пример здесь: http://jsfiddle.net/xine/BGV2Z/13/

  • 0
    Это тоже неплохо, но мне нужно немного больше анимации, а также поддержку браузеров без поддержки css3. Но спасибо за пример

Ещё вопросы

Сообщество Overcoder
Наверх
Меню