jQuery - animato/slide di altezza: 100%

Question

Ho un codice Siple qui:

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

Ora quando lo scatto come il primo 'ginocchiera', semplicemente mostra istantaneamente (senza animazione), quando Faccio clic sul secondo "interruttore", scorre graziosamente verso l'alto.

C'è un modo per farlo scorrere al 100% con quella bella animazione?

Answer 1

Forse si potrebbe fare qualcosa di simile:

$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

La mia soluzione per questo è stato quello di sommare le altezze degli elementi figlio del div, aggiungendo un po 'per tenere conto di margini:

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

ho trovato questo post mentre alla ricerca di una soluzione di me e Karim79 avuto la grande suggestione di utilizzare una variabile e la height() funzione.

Per quanto mi riguarda, non inizio con l'altezza al 100% poiché ho definito un'impostazione predefinita nel mio foglio di stile. Quindi quello che faccio nella funzione di espansione è che faccio una variabile che ha una query per tornare all'elemento specifico che voglio espandere e cambia l'altezza del css al 100% e restituire l'altezza a una variabile. Poi ho impostato il css per l'altezza indietro (suppongo che avrei potuto usare anche i vars per l'altezza preimpostata originale e in caso correggessi i css in futuro) e poi eseguire la funzione di animazione usando la var con l'altezza.

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

Anche io non sono molto esperto quindi perdonare la codifica.