jQuery mobile agregar animación al conjunto plegable

Question

Me gustaría agregar una animación al conjunto plegable con jQuery Mobile. Déjame mostrarte un ejemplo sencillo de esto:

<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 maneja esto perfectamente y me muestra conjunto plegable de 3 artículos. Lo que quiero es ANIMACIÓN, sin embargo, parece que no encuentro nada en los documentos.

no he probado todavía lo simple CSS animación (animación de propiedad height) iba a funcionar, sin embargo, es que hay un jQuery Mobile forma de hacerlo como si pasara algún indicador interno?

EDIT He probado un método simple jQuery animado y realmente funciona. Por si acaso alguien más necesita esto. Funciona sin problemas incluso en mi teléfono Android de 528 MHz en un navegador predeterminado. Un fragmento que he añadido es muy simple:

$(".ui-collapsible-heading").live("click", function(event, ui) { 
    $(this).next().css('height', '0').animate({ 
     height: '100px' 
    }); 
}); 

Answer 1

Aquí ya go:

$('[data-role="collapsible"]').bind('expand collapse', function (event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
});​ 

Me gustaba la idea de que ibas así que jugué un rato con él un poco. Esto se engancha en la forma en que jQuery Mobile controla los widgets plegables por lo que es un poco menos hacky y luego se une al elemento de encabezado.

El return false; detiene el comportamiento predeterminado y la otra línea alterna el contenido dentro/fuera de la vista mediante las animaciones jQuery slideUp/slideDown. También puede usar .fadeToggle() o desplegar sus propias animaciones. Si marca event.type puede animar en función del evento disparado.

Aquí es una demostración: http://jsfiddle.net/VtVFB/

Answer 2

El código no es del todo correcto. Anula la implementación móvil de jquery predeterminada de los eventos de expansión de colapso, pero no controla el cambio de los íconos de expansión de colapso.

Un código mejor será:

$('[data-role="collapsible"] h3:first').bind('click', function (event) { 
    $(this).next('p').slideToggle(500); 
    return false; 
});​ 

Answer 3

Tenga en cuenta que en jQuery Mobile 1.4 y hasta que necesitan de obligar a los collapsibleexpand y collapsiblecollapse eventos en lugar de expand y collapse. Por lo que el código completo se convierte en

$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) { 
    $(this).find('p').slideToggle(500); 
    return false; 
}); 

Answer 4

La cuenta de respuesta duerma aceptado para que no cambia el cursor plegable debido al retorno falsa, por lo que esta es mi respuesta de trabajo:

en mi proyecto era el contenido relativo a la [date-role="collapsible"] son $(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(); 
     } 
    }); 
}); 

No