JQuery-Mobile可折叠的slideDown效果

我想将一个slideDown或slideUp效果添加到具有data-role =’collapsible’的div中,因此它不会立即打开而是逐渐打开.

我试过这个：

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

但它仍然可以毫不拖延地打开和关闭.

任何人都知道如何调用那些slideDown和slideUp方法？

解决方法

实例：

> 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>