Ultimative Animation auf Höhe: Auto mit jQuery (So behalten Sie die tatsächliche Höhe: auto)

Question

Umformulieren, ich fragte es schlecht vorher. Hoffentlich erklärt dies mein Ziel ein bisschen besser und wenn jemand helfen kann, werde ich so dankbar sein:

Ich habe zwei divs so eingerichtet, dass, wenn Sie einen, der andere auf eine Höhe entsprechend für seinen Inhalt erweitert. Der expandierende div lädt bei height:0;overflow:hidden, aber da die Animation einen tatsächlichen Wert anstelle von height:auto erfordert, wird die Höhe vorübergehend auf "automatisch" umgeschaltet, gemessen, in einer Variablen für die Verwendung in der Animation gespeichert und dann wieder auf Null zurückgesetzt.

Das Problem besteht darin, dass das expandierende div Inhalt enthält, den der Benutzer anzeigen oder nicht anzeigen kann. Wenn der Benutzer längere Inhalte anzeigt, wird er abgeschnitten, da das übergeordnete div auf diese Pixelwerthöhe festgelegt wurde.

Also ich möchte, dass die Höhe des expandierenden div auf 'auto' zurückgesetzt wird, nachdem es sich erweitert hat. Wenn der Benutzer dann erneut auf die Schaltfläche klickt, um das div zu schließen, misst das Skript die Höhe neu und ändert sie in den aktuellen Pixelwert, sodass sie wieder auf null animiert werden kann.

Grundsätzlich wäre dies die Folge von Ereignissen sein:

1. Div # 2 Lasten bei height:0 und diese Höhe wird in einer Variablen gespeichert.
2. Die Höhe von Div ist auf auto eingestellt.
3. Die automatische Höhe wird als Pixelwert gespeichert.
4. Die Höhe ist auf Null zurückgesetzt.
5. Der Benutzer klickt div # 1, um div # 2 zu öffnen.
6. Die Höhe von Div # 2 wird von Null bis zum Pixelhöhenwert animiert.
7. Die Höhe wird wieder auf "auto" gesetzt, sobald die Animation abgeschlossen ist.
8. Benutzer Ansichten oder verbirgt Inhalt, der die Höhe des div ändert.
9. Der Benutzer klickt div # 1, um div # 2 zu schließen.
10. Die aktuelle Höhe von Div # 2 wird gemessen und als weiterer Pixel Wert gespeichert.
11. Die Höhe von Div # 2 wird auf den neuen Pixelwert gesetzt.
12. Die Höhe von Div # 2 ist wieder auf Null animiert.

Mit Box9's brilliant post, habe ich den folgenden Code eingerichtet, die erfolgreich die Schritte 1 bis 6. Schritt erreicht 7 ist das wichtig, dass ich nicht herausfinden kann, aber ich bin auf der Suche nach Hilfe bei den Schritten 7 bis 11.

$(function(){ 
    var el = $('#ev-donate-form'), 
     curHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
     el.height(curHeight); 
    $("#ev-sponsors").click(function() { 
     if(el.height() == 0) 
      el.height(curHeight).animate({height: autoHeight}, 600); 
     else 
      el.height(autoHeight).animate({height: curHeight}, 600); 
    }); 
}); 

Ich habe nichts zur Arbeit bekommen. Ich denke, vielleicht eine Art von setTimeout() an die Click-Funktion, die die Höhe automatisch nach der Dauer der Animation einstellen würde verwenden? Keiner meiner Versuche, die bisher erfolgreich gewesen, aber ich bin nicht sehr erfahren mit jQuery und es scheint, wie das funktionieren würde ...

Hier ist eine Geige für Experimente: https://jsfiddle.net/q00bdngk/1/

Answer 1

Die .animate function können Sie passieren eine complete Funktion. Diese Funktion wird immer ausgeführt, wenn die Animation abgeschlossen ist. Zu diesem Zeitpunkt können Sie die Höhe auf auto setzen, damit die Größe bei Bedarf geändert werden kann.

$(function() { 
 
    var el = $('#ev-donate-form'), 
 
    curHeight = el.height(), 
 
    autoHeight = el.css('height', 'auto').height(); 
 
    el.height(curHeight); 
 
    $("#ev-sponsors").click(function() { 
 
    if (el.height() == 0) { 
 
     el.animate({ 
 
     height: autoHeight 
 
     }, 600, function() { 
 
     el.css('height', 'auto'); 
 
     }); 
 
    } 
 
    else { 
 
     el.animate({ 
 
     height: curHeight 
 
     }, 600); 
 
    } 
 
    }); 
 
});

#ev-sponsors { 
 
    border: 1px solid; 
 
    padding: 1em; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
#ev-donate-form { 
 
    height: 0; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ev-sponsors"> 
 
    CLICK ME 
 
</div> 
 
<div id="ev-donate-form"> 
 
    <p><strong> 
 
    Set the height of this div to 'auto' after the animation that opened it. 
 
    </strong></p> 
 
    <textarea rows="4" cols="50"> 
 
    Resize this text area to change the height. 
 
    </textarea> 
 
</div>

Aber jetzt hast du ein Problem. Wenn Sie es schließen und wieder öffnen, sehen Sie einen Ruck in der Animation. Das ist, weil Sie aktualisieren müssen, was die endgültige Höhe sein wird. Tue das kurz bevor du das Element schließt und es wird dir gut gehen.

$(function() { 
 
    var el = $('#ev-donate-form'), 
 
    curHeight = el.height(), 
 
    autoHeight = el.css('height', 'auto').height(); 
 
    el.height(curHeight); 
 
    $("#ev-sponsors").click(function() { 
 
    if (el.height() == 0) { 
 
     el.animate({ 
 
     height: autoHeight 
 
     }, 600, function() { 
 
     el.css('height', 'auto'); 
 
     }); 
 
    } 
 
    else { 
 
     autoHeight = el.height(); // Update the actual height 
 
     el.animate({ 
 
     height: curHeight 
 
     }, 600); 
 
    } 
 
    }); 
 
});

#ev-sponsors { 
 
    border: 1px solid; 
 
    padding: 1em; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
#ev-donate-form { 
 
    height: 0; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ev-sponsors"> 
 
    CLICK ME 
 
</div> 
 
<div id="ev-donate-form"> 
 
    <p><strong> 
 
    Set the height of this div to 'auto' after the animation that opened it. 
 
    </strong></p> 
 
    <textarea rows="4" cols="50"> 
 
    Resize this text area to change the height. 
 
    </textarea> 
 
</div>