Ich habe ein Div, das Inhalt von einem Ajax-Aufruf empfängt. Im Moment bin ich tun dies nur in der Ajax-Callback-Handler:Erweitern Sie Div mit Animation
function searchCallback(html) { $("#divSearchResults").html(html); }
Dies macht den Inhalt „Pop“ auf die Seite, und es ist sehr abrupt. Gibt es eine Möglichkeit, die Größe der div-Datei wie bei der .slideToggle() -Methode zu ändern?
Sie könnten es zunächst versteckt haben. Dann füge den HTML-Code ein und wenn diese Funktion fertig ist, führe einen Show-Effekt aus. (Wie Ihr slideToggle)
nicht sicher, dass dies funktionieren wird, aber einen Versuch wert:
Stellen Sie sicher, seine versteckten, dann den Inhalt hinzufügen und es nur in schieben
$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();
Oder Sie es in verblassen könnte.
$("#divSearchResults").fadeIn();
Um sicherzustellen, dass Ihre Seite nicht "explode" Wenn der Inhalt angezeigt wird, vergewissern Sie sich, dass das div nicht sichtbar ist. Stellen Sie außerdem sicher, dass die Seite nach dem Hinzufügen von Inhalt gut aussieht.
großartig, antworten Sie mir helfen, es nach unten schieben: '$ ('# divid'). SlideDown(); \t \t \t $ ('# divid'). Css ('Anzeige', 'Block'); '. aber wie kann ich es wieder hochschieben? Es scheint eine Funktion 'slideUp()' zu geben, hat aber keinen Effekt in meinem Code: '$ ('# divid'). css ('display', 'none'); \t \t \t \t $ ('# divid'). SlideUp(); ' – ulkas
vergesst, ich habe es gefunden. es gibt keine Notwendigkeit, mit dem css 'display zu spielen: block/display: none', die Funktionen' slideDown();/slideUp' mach es selbst. – ulkas
Sicher, Sie könnten versuchen, diese:
function searchCallback(html) {
var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
$('#divSearchResults').html(html);
$('#divSearchResults .hidden_insert').slideDown('medium');
}
nicht die schönste Sache, aber es funktionieren würde. Sie könnten es aufwerten, indem Sie einen CSS-Stil für die Klasse 'hidden_insert' erstellen, wodurch ein Element mit dieser Klasse standardmäßig ausgeblendet wird. Auch in Ihrem Backend, wo Sie dieses Datum senden, können Sie das Wrapping dort anstatt in Ihrem Javascript machen. Das Skript könnte dann beispielsweise vereinfacht werden:
Ich habe keine dieser beiden getestet, aber sie sollten funktionieren.
Danke Kyle, das ist ähnlich wie meine endgültige Lösung. :) –
Sie sind herzlich willkommen. Jederzeit. – KyleFarris
Dies würde dazu führen, dass das div verschwindet und auch alle Inhalte abrupt kollabieren. – Seb
Danke, das ließ mich zu meiner endgültigen Lösung. Ich rufe "slideUp" auf dem div, mit einer Callback-Methode. In diesem Callback (sobald das div ausgeblendet ist) stelle ich den Inhalt ein und rufe "slideDown" auf. So viele Rückrufe haben sich aneinander gereiht, aber es funktioniert. –
Gern geschehen :) –