jQuery - animate/zjeżdżalnia do wysokości: 100%

Question

Mam Siple kod tutaj:

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

Teraz po kliknięciu go jako pierwszego „przełączania”, to tylko pokazuje od razu (bez animacji), gdy Klikam drugi "przełącznik", ładnie się ślizga.

Czy istnieje sposób, aby przesunąć go do 100% dzięki tej ładnej animacji?

Answer 1

Być może można zrobić coś takiego:

$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

Moja obejście tego było zsumować wyżyny elementów podrzędnych w div, dodając trochę aby uwzględnić marginesy:

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

Znalazłem ten post, patrząc na rozwiązanie siebie i Karim79 miał wielkiego sugestię użyciu zmiennej iFunkcja.

Dla mnie nie zaczynam od wysokości 100%, ponieważ mam zdefiniowaną wysokość zdefiniowaną w moim arkuszu stylów. Więc, co robię w funkcji rozwijania, to tworzę zmienną, która ma zapytanie do cofnięcia się do konkretnego elementu, który chcę rozwinąć i zmienia wysokość css na 100% i zwraca wysokość do zmiennej. Następnie ustawiłem css na wysokość z powrotem (przypuszczam, że mogłem przyzwyczaić się do vars powiedział pierwotną wysokość preset i okroić I edytować css w przyszłości), a następnie uruchomić funkcję animacji za pomocą var z wysokością.

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

Nie mam również dużego doświadczenia, więc wybacz mi niechlujstwo.