Я пытаюсь добавить простую анимацию в меню 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');
});
});
Я пропускаю что-то очевидное, любая помощь приветствуется. Спасибо!
Добавить position: relative;
к вашему CSS для ul.dropdown li
ul.dropdown li {
float: left;
min-height: 1px;
vertical-align: middle;
margin:0 5px;
display:block;
position: relative;
}
Вы можете сделать это без необходимости jQuery и использовать анимацию CSS3 :)
Просто добавьте анимацию transition
, пример здесь: http://jsfiddle.net/xine/BGV2Z/13/