Выпадающее меню с fadein и высотой

Я пытаюсь создать навигационное меню, например, здесь (http://themes.fuelthemes.net/bouncy/), и я пришел довольно близко, но мой не совсем выглядит (анимация не такая гладко), как хорошо, как в примере. Исходный код очень большой, и я не могу найти, как автор создает анимации в коде css или через javascript. Вот что я до сих пор. Может кто-нибудь, пожалуйста, взгляните и скажите мне, что я делаю неправильно?Выпадающее меню с fadein и высотой

Метод, который я использую, чтобы сделать меню слайдом, - это свойство max-height, и я заставляю его исчезать с помощью свойства непрозрачности.

Bulk анимации кода:

.menu > li:hover > ul { 
    display: block; 
    -webkit-transition: max-height 0.2s, opacity 0.2s; 
    -moz-transition: max-height 0.2s, opacity 0.2s; 
    -ms-transition: max-height 0.2s, opacity 0.2s; 
    -o-transition: max-height 0.2s, opacity 0.2s; 
    transition: max-height 0.2s, opacity 0.4s; 
    max-height: 500px; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 
.dropdown { 
    max-height: 0; 
    position: absolute; 
    list-style: none; 
    background: #2c2c2c; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
}

Мои JSFiddle: http://jsfiddle.net/cn2fZ/

источник

2013-06-18 Stas Jaro

Я бы просто увеличил время перехода: http://jsfiddle.net/cn2fZ/1/ – sinisake

Тот, который я пытаюсь скопировать, так же длинный, но он замедляется в самом конце I думать. Может быть, другая функция ослабления ... –

Они не используют Transistions, что код что-то вроде этого

или

этот http://jsbin.com/onituc/2/edit

Обе различные стили

Первый из них использует mouseenter и mouseleave функции в сочетании с функцией delay. А также с помощью FadeIn, мы можем изменить fadeIn на другие вещи, как show slideDown

Второй раз использует slideUp и slideDown функции в сочетании, а также с mouseentermouseleave

Надежда один из них два помогите вам, если вам нужна дополнительная помощь, прокомментируйте:

источник

2013-06-18 02:22:05 EasyBB

Выпадающее меню с fadein и высотой

ответ

Смежные вопросы