JQuery-Mobile可折叠slideDown效果 [英] JQuery-Mobile collapsible slideDown effect

问题描述

我想用data-role='collapsible'向div添加slideDown或slideUp效果，因此它不会立即打开而是逐渐打开.

I want to add a slideDown or slideUp effect to a div with data-role='collapsible', so it will not open at once but gradually.

我已经尝试过了:

$('#my-collapsible').live('expand', function() {      
    $('#my-collapsible .ui-collapsible-content').slideDown(2000);
});    
$('#my-collapsible').live('collapse', function() {
    $('#my-collapsible .ui-collapsible-content').slideUp(2000);
});

但是它仍然可以立即打开和关闭.

But it still opens and closes without delay.

任何人都知道我该怎么称呼那些slideDown和slideUp方法?

Anyone knows how should I call those slideDown and slideUp methods?

推荐答案

实时示例:

• http://jsfiddle.net/6txWy/6/
• http://jsfiddle.net/6txWy/7/

• http://jsfiddle.net/6txWy/6/
• http://jsfiddle.net/6txWy/7/

JS

$('#my-collaspible').bind('expand', function () {
    $(this).children().slideDown(2000);
}).bind('collapse', function () {
    $(this).children().next().slideUp(2000);
});

HTML

<div data-role="page">
    <div data-role="content">
        <div data-role="collapsible" id="my-collaspible">
            <h3>My Title</h3>
            <p>My Body</p>
        </div>
    </div>
</div>

这篇关于JQuery-Mobile可折叠slideDown效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！