我想用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'
});
});
在这里你去:
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
$(this).find('p').slideToggle(500);
return false;
});
我喜欢你要去的想法,所以我玩了一下。这与jQuery Mobile控制可折叠小部件的方式挂钩,因此它比绑定到标题元素要少一些黑客。
return false;
停止默认行为,另一行使用 jQuery slideUp
/slideDown
动画将内容切换入/移出视图。您还可以使用.fadeToggle()
或滚动自己的动画。如果选中event.type
则可以根据触发的事件进行动画处理。
这是一个演示:http://jsfiddle.net/VtVFB/
,在jQuery Mobile 1.4及更高版本中,您需要绑定到collapsibleexpand
和collapsiblecollapse
事件,而不是expand
和collapse
。所以完整的代码变成了
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
$(this).find('p').slideToggle(500);
return false;
});
代码并不完全正确。它覆盖了展开折叠事件的默认 jquery 移动实现,但不处理展开折叠图标的更改。
更好的代码是:
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
$(this).next('p').slideToggle(500);
return false;
});
接受的答案没有说明它不会因为返回 false 而更改可折叠光标,所以这是我的答案:
在我的项目中,与[date-role="collapsible"]
相关的内容是$(this).find('>*:not(h3)')
/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
$(this).find('>*:not(h3)').each(function() {
if (!$(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
}).on('collapse', function (event) {
$(this).find('>*:not(h3)').each(function() {
if ($(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
});