jQuery mobile将动画添加到collapsible-set

Question

我想用jQuery Mobile向可折叠集添加动画.让我举一个简单的例子:

<div id="tiles" data-role="collapsible-set" data-iconpos="right">
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
   <div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>

jQuery Mobile完美地处理了这个并向我展示了3个项目的可折叠组合.我想要的是动画,但我似乎没有在文档中找到任何内容.

我还没有测试过CSS动画(动画高度属性)的工作原理是多么简单,但是有没有jQuery Mobile这样做的方式就像转动一些内部标志一样？

编辑 我测试了一个简单的jQuery动画方法,它实际上工作.以防万一其他人需要这个.即使在我的528MHz Android手机上,它也能在默认浏览器上顺畅运行.我添加的代码片段非常简单:

$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
    $(this).next().css('height', '0').animate({
        height: '100px'
    });
});

Answer 1

你走了:

$('[data-role="collapsible"]').bind('expand collapse', function (event) {
    $(this).find('p').slideToggle(500);
    return false;
});?

我喜欢你想要的想法,所以我玩了一下.这与jQuery Mobile控制可折叠小部件的方式挂钩,因此它比标题元素绑定更少hacky.

该return false;停止的默认行为,而另一个线切换在/内容出使用jQuery视图slideUp/ slideDown动画.您也可以使用.fadeToggle()或滚动自己的动画.如果您检查,event.type您可以根据触发的事件进行动画处理.

这是一个演示:http://jsfiddle.net/VtVFB/