jQuery Mobile-efecto slideDown plegable

Question

Quiero añadir un efecto de slideDown o slideUp a un div con data-role='collapsible', por lo que no se abrirá a la vez, sino poco a poco.

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 abre y cierra sin demora.

Cualquiera sabe cómo debo llamar a los métodos slideDown y slideUp?

Answer 1

Ejemplo vivo:

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

Answer 2

Por alguna razón la solución de Phill no funcionaba en mi entorno, pero una versión ligeramente modificada no, tal vez alguien tendrá el uso de este:

$(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 trabaja directamente sobre todos los elementos plegables en jQuery Mobile porque usa el selector .ui-collapsible, que todos los elementos colapsables tienen

Answer 3

Quizás una vieja pregunta, pero jQuery Mobile ha cambiado mucho desde entonces.

Aquí es un ejemplo de trabajo en la animación de 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']")); 
}); 

Answer 4

Aquí está mi swing, que necesitaba para la materia anidada.

// 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 
}); 

Answer 5

Aquí es excelente respuesta de Jerone para jQuery Mobile 1.4 (nombres de eventos cambiado ligeramente, data-role = "collapsibleset" es ahora de datos-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"]')); 
});