Div mit Animation erweitern

Question

Ich habe ein DIV, das Inhalte aus einem Ajax -Anruf erhält. Im Moment mache ich das gerade im Ajax Callback -Handler:

function searchCallback(html) { $("#divSearchResults").html(html); }

Dies macht den Inhalt "Pop" auf der Seite und ist sehr abrupt. Gibt es eine Möglichkeit, die DIV anmutig zu ändern, wie die Methode .Slidetoggle ()?

Answer 1

Sie könnten es von Anfang an verstecken lassen. Fügen Sie dann die HTML ein und machen Sie, wenn diese Funktion erledigt ist, einen Show -Effekt darauf. (wie dein Slidetoggle)

Answer 2

Stellen Sie sicher, dass es versteckt ist, fügen Sie den Inhalt hinzu und schieben Sie ihn einfach hinein.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

Oder Sie könnten es verblassen in:

$("#divSearchResults").fadeIn();

Um sicherzustellen, dass Ihre Seite nicht "explodieren", wenn der Inhalt angezeigt wird, stellen Sie sicher, dass die DIV versteckt ist. Stellen Sie außerdem sicher, dass die Seite gut aussieht, wenn der Inhalt hinzugefügt wird.

Answer 3

Ich bin mir nicht sicher, ob dies funktionieren wird, aber es lohnt sich, es zu versuchen:

• Finden Sie die aktuelle Div -Größe heraus und stellen Sie sie fest.
• Aktualisieren Sie HTML
• Animalhöhe und Breite zu "automatisch".

Answer 4

Sicher, Sie könnten das versuchen:

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

Nicht das Schönste, aber es würde funktionieren. Sie könnten es hübsch machen, indem Sie einen CSS -Stil für die Klasse 'Hidden_insert' erstellen, die ein Element mit dieser Klasse standardmäßig versteckt machen würde. Außerdem können Sie auf Ihrem Backend, wo Sie dieses Datum senden, das Wickeln dort anstatt in Ihrem JavaScript durchführen. Das Skript könnte dann zu so etwas vereinfacht werden:

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

Ich habe keine davon getestet, aber sie sollten arbeiten.