jQuery Mobile的可折叠幻灯片切换 [英] JQuery Mobile Collapsable Slide Transition

问题描述

有没有人能幻灯片转场添加了jQuery可折叠的财产？

Has anyone been able to add a slide transition to the JQuery Collapsible property?

我试图做一个清单是可折叠使用的数据插入=false的的，当用户点击菜单项，倒塌的部分滑出。

I am trying to make a list that is collapsable with data-inset="false", and when the user taps the menu item, the collapsed section slides out.

下面是什么，我试图做一个例子（但使用jQuery Mobile代替），但是，在这个例子中，转型并不顺利，因为我想它：的 http://www.designgala.com/demos/collapse-expand-jquery.html

Here is an example of what I am trying to do (but with JQuery Mobile instead), however, in this example, the transition is not as smooth as I would like it: http://www.designgala.com/demos/collapse-expand-jquery.html

想法？

请注意：我看到其他职位有类似的目标，但是，没有用的帖子我描述的过渡，他们采用了淡入淡出

Note: I have seen other posts with a similar objective, however, none of the posts used the transition I described, they used a fade.

推荐答案

下面是一个非常简单和简洁的JS位，我使用我的动画可折叠套。

Here's a very simple and concise bit of JS that I use to animate my collapsible sets.

$(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 一个演示。

Here's a demo in JSFiddle.

这篇关于jQuery Mobile的可折叠幻灯片切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！