jQuery - animado/deslizante a la altura: 100%

Question

Tengo un código siple aquí:

$('.aktualita_sipky').toggle(function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: "100%", 
     }, 1500); 
}, function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: "120px", 
     }, 1500); 
}); 

Ahora, cuando hago clic en él como el primer 'alternar', sólo muestra al instante (sin la animación), cuando Hago clic en el segundo 'alternar', se desliza suavemente hacia arriba.

¿Hay alguna forma de deslizarlo al 100% con esa bonita animación?

Answer 1

Tal vez podría hacer algo como:

$height = $(window).height(); // returns height of browser viewport 
//Or 
$height = $(document).height(); // returns height of HTML document 
//Or 
$height = $(whatever).height(); 
$('.aktualita_sipky').toggle(function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: $height + 'px', 
     }, 1500); 
}, function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: $height + 'px', 
     }, 1500); 
}); 

http://docs.jquery.com/CSS/height

Answer 2

Mi solución para esto era que sumar las alturas de los elementos secundarios del div, añadiendo un poco para dar cuenta de los márgenes:

function() { 
    $('.accordionblock.open').removeClass('open'); 
    var childrenheight = 0; $(this).children().each(function() {childrenheight += ($(this).height()*1.2)}); 
    $(this).animate({height:childrenheight},300).addClass('open'); 
    } 
} 

Answer 3

me encontré con este post en la búsqueda de una solución a mí mismo y Karim79 tuvo la gran sugerencia de utilizar una variable y laFunción

Para mí no empiezo con la altura al 100% ya que tengo una altura predefinida definida en mi hoja de estilos. Entonces, lo que hago en la función para expandir es hacer una variable que tenga una consulta para retroceder al elemento específico que quiero expandir y cambiar la altura de css al 100% y devolver el alto a una variable. Luego configuré el CSS para la altura hacia atrás (supongo que también podría haber usado vars para contar la altura preestablecida original en caso de que edite el css en el futuro) y luego ejecutar la función de animación usando var con height.

function expandAlbum(){ 
    var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height(); 
    jQuery(this).prev('.albumDropdown').css('height' , '145px'); 
    jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();}); 
    jQuery(this).html('close'); 
} 

Tampoco tengo mucha experiencia, así que perdona la codificación descuidada.