Сворачиваемый слайд-переход JQuery для мобильных устройств

Кто-нибудь смог добавить переход слайдов в свойство JQuery Collapsible?

Я пытаюсь создать сворачиваемый список с помощью data-inset="false", и когда пользователь нажимает на элемент меню, свернутый раздел выскальзывает.

Вот пример того, что я пытаюсь сделать (но вместо этого с помощью JQuery Mobile), однако в этом примере переход не такой плавный, как хотелось бы: http://www.designgala.com/demos/collapse-expand-jquery.html

Идеи?

Примечание. Я видел другие сообщения с аналогичной целью, однако ни в одном из сообщений не использовался описанный мной переход, в них использовалось затухание.


animation jquery jquery-mobile jquery-mobile-collapsible
person Jake Chasan    schedule 20.03.2014    source источник
comment
у вас есть пример кода, который мы могли бы помочь исправить? Я бы предложил разместить ваши данные внутри div с overflow:hidden, а затем анимировать открытый div-контейнер, в то время как div внутри него растягивается до нужной высоты.   -  person ntgCleaner    schedule 21.03.2014
comment
На самом деле мне было интересно, может ли кто-нибудь предоставить пример кода, так как я не уверен, с чего начать с переходами.   -  person Jake Chasan    schedule 21.03.2014
comment
взгляните на jQuery .slideUp и .slideDown api.jquery.com/slideUp. Они оба работают с мобильными устройствами и довольно плавно, если вы делаете их правильно.   -  person ntgCleaner    schedule 21.03.2014
comment
возможный дубликат Пользовательская анимация для складного набора не работает в jQuerymobile 1.4.0   -  person Omar    schedule 23.03.2014

Ответы (1)


arrow_upward
5
arrow_downward

Вот очень простой и лаконичный фрагмент JS, который я использую для анимации своих складных наборов.

$(document).on('pageinit', function(){
    $("[data-role='collapsible']").collapsible({

        collapse: function( event, ui ) {
            $(this).children().next().slideUp(150);
        },
        expand: function( event, ui ) {
            $(this).children().next().hide();
            $(this).children().next().slideDown(150);
        }

    });
});

Вот демонстрация в JSFiddle.

person Noah Ratcliff    schedule 14.07.2014
comment
Хм, у меня это не сработало без указания аргумента страницы pageinit. - person StevieD; 18.05.2015
comment
На самом деле, проблема в том, что я пытаюсь заставить это работать со складными объектами, которые, я думаю, вводятся в dom через ajax после события pageinit. - person StevieD; 18.05.2015