Итак, я добавлял некоторые анимации в выпадающие списки на панели навигации, но по какой-то причине наиболее приемлемый ответ (Добавление эффекта слайда в раскрывающийся список начальной загрузки), кажется, сломался или стал "обычный" размер при движении по маленьким размерам окна.
Итак, странно, что это происходит только с анимацией slideUp из опубликованной статьи:
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000);
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000);
});
Я могу скопировать и вставить эти строки в консоль Google Chrome на http://bootswatch.com/default/, изменить свое разрешение на то, где сбой нарбаров, и они все ломаются. (Я увеличил время анимации, чтобы попробовать и устранить неполадки.)
Normal:
Сломанный SlideUp:
Но по какой-то причине, если я запустил $('.navbar').find('.dropdown-menu').slideUp(5000);
, я получаю меню нормального поведения:
Мысли?
Обновить. Он работает с последним параметром, потому что он не удаляет класс 'open' из входящего в него элемента LI. Поэтому, возможно, класс open
подвергается преждевременному удалению во время работы анимации.
Обновление 2. Я могу его исправить с помощью preventDefault:
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
$(this).parent().removeClass('open');
});
});