animate height auto

JasminB

Grünschnabel
Hallo ihr Lieben,

vielleicht könnt ihr mir helfen.

Ich habe folgenden Code:

$(".facts").click(function(e) {
if($(this).height() >50) {
$(this).animate({height:50+'px'});
$(this).find('.servicedrop').toggleClass('fa-caret-up fa-caret-down');
$(this).removeClass("facts_active");
}else{
if ( $(".facts_active").length) {
$(".facts_active").animate({height:50+'px'});
}
$(this).animate({height:350 + 'px'});
$(this).find('.servicedrop').toggleClass('fa-caret-down fa-caret-up');
$(this).addClass("facts_active");
}
});

Ist es möglich, das die Höhe beim aufsliden nicht genau 350 Pixel hoch ist, sondern sich automatisch aus dem Inhalt zieht? Also im CSS wäre es ja height:auto; ... aber das funktioniert hier nicht so einfach. Zudem würde ich gern eine Mindesthöhe angeben. Also im CSS min-height:350px; height:auto; ... wie kann ich das hier im JS umsetzen?

Lieben Dank schon einmal!!!
Jasmin
 
Das Problem hatte ich auch mal. Anscheinend kann man nicht height: auto als Endwert für die Animation angeben. Ich habe es so gelöst, dass ich beim Laden im offenen Zustand, also mit height:auto, die Höhe ermittelt und in einer Variablen oder in einem Data-Attribut gespeichert habe. Später kannst Du dann beim Öffnen diese Höhe verwenden. Und die minimale Höhe kannst Du ja bei der Ermittlung der Höhe berücksichtigen.
Wenn der Container nach dem Laden zu geklappt sein soll, kannst Du ihn, nach Ermittlung der Höhe, gleich im document-ready zumachen.
 
Hey Sempervivum,

vielen Dank für deine Antwort. Leider bekomme ich es nicht hin den Code so zu schreiben :/

Herzliche Grüße
Jasmin
 
Vielleicht kannst Du eine vollständige Demo bei jsfiddle.net anlegen, dann zeige ich es dir. Oder auch das HTML und das CSS posten.
 
Ein Workaround der in vielen Fällen funktioniert ist nicht height zu animieren, sondern max-height.

Im zugeklappten Zustand also max-height: 0 (oder wenn du wie du sagst eine min-height willst max-height: 50px)
Und im aufgeklappten Zustand max-height: 10000px (oder irgendeine Zahl die bestimmt höher ist als das eigentliche Element)

Somit kannst du height auf auto lassen.

Beachten musst du aber, dass bei max-height: 10000px die animation über die ganzen 10'000 Pixel läuft, bei 1sec klappt es also SEHR schnell auf. deshalb max-height so klein wie möglich, aber so gross wie nötig wählen)
 
Zurück