jQuery - belebte/Folie height: 100%

Question

ich hier einen siple Code habe:

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

Nun, wenn ich es als den ersten 'Toggle' klicken, es (ohne Animation) sofort nur zeigt, wenn Ich klicke auf den zweiten "Toggle", es gleitet schön nach oben.

Gibt es eine Möglichkeit, es mit dieser netten Animation auf 100% herunter zu schieben?

Answer 1

Vielleicht könnten Sie so etwas wie:

$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

für Meine Abhilfe war die Höhe der untergeordneten Elemente in der div zu addieren, ein wenig Zugabe für die Margen zu berücksichtigen:

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

fand ich diesen Beitrag, während für eine Lösung selbst suchen und Karim79 hatte den großen Vorschlag eine Variable verwenden und die height() Funktion.

Für mich beginne ich nicht mit der Höhe bei 100%, da ich eine voreingestellte Höhe in meinem Stylesheet definiert habe. Also, was ich in der Funktion zu erweitern mache, mache ich eine Variable, die eine Abfrage auf Schritte zurück zu dem spezifischen Element hat, das ich erweitern möchte, und ändert die css-Höhe auf 100% und gibt die Höhe an eine Variable zurück. Dann setze ich die CSS für die Höhe zurück (ich könnte ich hätte verwendet, um Vars sagte die ursprüngliche voreingestellte Höhe sowie in dem Fall, dass ich die CSS in der Zukunft bearbeiten) und dann die Animationsfunktion mit der Variable mit der Höhe ausführen.

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

ich auch sehr bin nicht so vergeben schlampig Codierung erfahren.