我想用 为可折叠集添加动画jQuery 移动版 .
让我展示一个简单的例子:
<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 移动版 完美地处理了这个问题,并向我展示了可折叠的 3 件元素。我想要的是动画,但是我似乎在文档中找不到任何东西。
我还没测试过有多简单 CSS 动画 (动画高度属性)会起作用,但是是否有 jQuery 移动版 这样做的方式就像转动一些内部标志?
编辑
我已经测试了一个简单的 jQuery animate 方法,它确实有效。以防万一其他人需要这个。即使在我的 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 控制可折叠小部件的方式 Hook ,因此与绑定(bind)到标题元素相比,它有点不那么笨拙。
return false;
停止默认行为,另一行使用 jQuery slideUp
切换内容进/出 View /slideDown
动画。您也可以使用 .fadeToggle()
或滚动您自己的动画。如果您查看 event.type
您可以根据触发的事件制作动画。这是一个演示:http://jsfiddle.net/VtVFB/
关于jquery-mobile - jQuery mobile 将动画添加到可折叠集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10438588/