jquery animar a min-height o auto

Question

Tengo algunas cosas jquery aquí para animar una capa al hacer clic. El problema es que a veces el contenido puede exceder la altura asignada en la configuración de altura. ¿Hay alguna forma de modificar esto para animar la capa a una altura mínima o automática en lugar de una cantidad establecida de px?

$(function() { 
    $(".showcart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "200px" }, "fast"); 
    }); 
    $(".hidecart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "0px"}, "fast"); 
    }); 
}); 

Answer 1

Desafortunadamente no, no se puede decir que solo anime a lo que le queda. Para hacer esto, tendrá que saber ya el tamaño correcto o tener una forma de calcularlo.

Si todo esto sucede dentro de una sola función o un solo complemento, puede considerar almacenar el valor de $(this).height() en una variable en algún lugar antes de expandirlo, por lo tanto podrá volver a colocarlo donde solía ser.

De lo contrario, una posibilidad podría ser poner un div dentro del que pretende hacer crecer/contraer y usar get $('> div', $(this)).height() para obtener la altura de su div que debe ser el alto del contenido, no importa cuánto meterse con la altura del div exterior.

Answer 2

Esto es algo difícil, porque depende mucho de la estructura de su página. Si puede establecer el css min-height, o puede obtener la altura de otro elemento como punto de referencia, puede animar a ese tamaño haciendo que las cosas sean un poco más dinámicas. Desafortunadamente, no hay ningún método de cambio de tamaño de auto-magia en jQuery.

$(this).css("min-height"); //Gets min-height CSS property 

// or.. 

$(this).height(); //Gets element height 

Espero que ayude.

Answer 3

me encontré con que sólo se puede hacer esto:

$("#cart").animate({ 'min-height': "250px" }, 'fast'); 

citas son la clave aquí.