JQuery-Mobile deslizable efecto DownDown

Quiero agregar un efecto slideDown o slideUp a un div con data-role='collapsible' , para que no se abra de una vez sino de forma gradual.

He intentado esto:

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

Pero todavía se abre y se cierra sin demora.

¿Alguien sabe cómo debería llamar a esos métodos slideDown y slideUp ?

Ejemplo vivo:

JS

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

HTML

 

My Title

My Body

Por alguna razón, la solución de Phill no funcionó en mi entorno, pero sí una versión ligeramente modificada, tal vez alguien tenga uso de esto:

 $(document).on('expand', '.ui-collapsible', function() { $(this).children().next().hide(); $(this).children().next().slideDown(200); }) $(document).on('collapse', '.ui-collapsible', function() { $(this).children().next().slideUp(200); }); 

Esto también funciona directamente en todos los elementos plegables en jquery mobile porque usa el selector plegable .ui, que tiene todos los elementos plegables.

Tal vez una vieja pregunta, pero jQuery Mobile cambió mucho desde entonces.

Aquí hay un ejemplo práctico de cómo animar un conjunto plegable: http://jsfiddle.net/jerone/gsNzT/

 /*\ Animate collapsible set; \*/ $(document).one("pagebeforechange", function () { // animation speed; var animationSpeed = 200; function animateCollapsibleSet(elm) { // can attach events only one time, otherwise we create infinity loop; elm.one("expand", function () { // hide the other collapsibles first; $(this).parent().find(".ui-collapsible-content").not(".ui-collapsible-content-collapsed").trigger("collapse"); // animate show on collapsible; $(this).find(".ui-collapsible-content").slideDown(animationSpeed, function () { // trigger original event and attach the animation again; animateCollapsibleSet($(this).parent().trigger("expand")); }); // we do our own call to the original event; return false; }).one("collapse", function () { // animate hide on collapsible; $(this).find(".ui-collapsible-content").slideUp(animationSpeed, function () { // trigger original event; $(this).parent().trigger("collapse"); }); // we do our own call to the original event; return false; }); } // init; animateCollapsibleSet($("[data-role='collapsible-set'] > [data-role='collapsible']")); }); 

Aquí está mi swing que necesitaba para cosas anidadas.

  // look for the ui-collapsible-content and collapse that // also need the event (which is an arg) to stop the outer expander from taking action. $(document).on('expand', '.ui-collapsible', function(event) { var contentDiv = $(this).children('.ui-collapsible-content'); contentDiv.hide(); contentDiv.slideDown(300); event.stopPropagation(); // don't bubble up }) $(document).on('collapse', '.ui-collapsible', function(event) { var contentDiv = $(this).children('.ui-collapsible-content'); contentDiv.slideUp(300); event.stopPropagation(); // don't bubble up }); 

Aquí está la excelente respuesta de jerone para jQuery Mobile 1.4 (los nombres de los eventos cambiaron ligeramente, data-role = “collapsible-set” ahora es data-role = “collapsibleset”):

 /*\ Animate collapsible set; \*/ $( document ).one( 'pagecreate', function() { // animation speed; var animationSpeed = 500; function animateCollapsibleSet( elm ) { // can attach events only one time, otherwise we create infinity loop; elm.one( 'collapsibleexpand', function() { // hide the other collapsibles first; $( this ).parent().find( '.ui-collapsible-content' ).not( '.ui-collapsible-content-collapsed' ).trigger( 'collapsiblecollapse' ); // animate show on collapsible; $( this ).find( '.ui-collapsible-content' ).slideDown( animationSpeed, function() { // trigger original event and attach the animation again; animateCollapsibleSet( $( this ).parent().trigger( 'collapsibleexpand' ) ); } ); // we do our own call to the original event; return false; } ).one( 'collapsiblecollapse', function() { // animate hide on collapsible; $( this ).find( '.ui-collapsible-content' ).slideUp( animationSpeed, function() { // trigger original event; $( this ).parent().trigger( 'collapsiblecollapse' ); } ); // we do our own call to the original event; return false; } ); } // init; animateCollapsibleSet( $( '[data-role="collapsibleset"] > [data-role="collapsible"]' ) ); } );