Animiere div mit Inhalt nach unten

Ich habe ein Formular und wenn ein Benutzer es übermittelt, blendet es einen Rückruf unterhalb der Kopfzeile aber oberhalb der Formulareingaben. Im Moment stellt es nur die Formulareingaben etwas ein, aber was ich will ist, dass es langsam nach unten geht.Animiere div mit Inhalt nach unten

Raue HTML-Code:

<body> 
<div class="formbox"> 
    <h1>My Header</h1> 

    <div id="callbackDiv"></div> 

    <div id="formContent"> 
     // My different HTML-Input-Elements 
    </div> 
</div> 
</body>

Die div 'formbox' wickelt einen Hintergrund um die ganze Form. In 'CallbackDiv' erscheint dann eine Nachricht. Was ich gerne bekommen würde ist, dass der 'FormContent' langsam nach unten geht und der 'Formbox'-Hintergrund sich ebenfalls ausdehnt. Das Anzeigen des Rückrufs ist kein Problem. Alles, was ich brauche, ist der Animationsteil für 'formContent' und 'formbox'.

Ich sah jQueries .animate und .slideDown, aber ich konnte nicht herausfinden, wie es funktioniert.

Quelle

2017-02-27 Wulthan

Set callbackDiv Ausgangszustand:

// CSS 
display: none

dann in Ihrem Rückruf, wenn Sie den Inhalt erhalten innerhalb callbackDiv Verwendung anzuzeigen:

// Javascript (Jquery) 
$("#callbackDiv").slideDown("fast");

Potenziell wenn Sie den Inhalt von einem Ajax-Aufruf erhalten (Ich denke schon) Sie können:

$("#callbackDiv").html(your_content).slideDown("fast");

Quelle

2017-02-27 10:53:12

Vielen Dank, das hat funktioniert, ich denke, der CSS-Teil war das Problem – Wulthan

Animiere div mit Inhalt nach unten

Antwort

Verwandte Themen