Fügen Sie ein Element mit eingeblendetem Effekt hinzu [jQuery]

121 
var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

Das scheint nicht zu funktionieren.

Ich möchte nur einen coolen Effekt, wenn der Inhalt angehängt wird.

Hinweis: Ich möchte, dass nur das neue "bla" -Div eingeblendet wird, nicht der gesamte "mycontent".

javascript jquery html css TIMEX
quelle
mögliches Duplikat von Using Fadein und Append
Benutzer

Antworten:

262 
$(html).hide().appendTo("#mycontent").fadeIn(1000);
icktoofay
quelle
1
Ich möchte, dass nur das neue "bla"
-Div eingeblendet wird
@ TimEX: Das sollte das tun.
icktoofay
Gibt es einen Grund, warum Sie zuerst ausblenden und dann anhängen (weil es schneller ist, zuerst einen Stil festzulegen, bevor Sie ihn an das DOM anhängen, oder so etwas), oder macht es keinen Unterschied?
QWERTymk
2
@qwertymk: Es gibt keinen wirklichen Grund. Wenn Browser jemals gerendert wurden, während das DOM noch manipuliert wurde (was meines Wissens derzeit kein Browser tut), würde der Inhalt nicht blinken, bevor er eingeblendet wird. Auch dies ist nicht wirklich wichtig.
icktoofay
1
@ArthurTarasov: Das hängt #blahan sich selbst, was nicht so aussieht , als ob Sie es tun möchten (und ich vermute, es wird als No-Op interpretiert). Sie können das .appendToTeil auch einfach fallen lassen und verwenden $('#mycontent').hide().fadeIn(1000).
icktoofay
52

Ein bisschen mehr Infos hinzufügen:

jQuery implementiert "Methodenverkettung", dh Sie können Methodenaufrufe für dasselbe Element verketten. Im ersten Fall:

$("#mycontent").append(html).fadeIn(999);

fadeInIn diesem Fall wenden Sie den Aufruf auf das Objekt an, das das Ziel der Methodenkette ist #mycontent. Nicht was du willst.

In @ icktoofays (großartiger) Antwort haben Sie:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Dies bedeutet im Grunde, dass Sie das erstellen html, standardmäßig als ausgeblendet festlegen, anhängen #mycontentund dann einblenden. Das Ziel der Methodenkette ist jetzt hmtlstatt #mycontent.

Pablo Fernandez
quelle
18

Das funktioniert auch

$(Your_html).appendTo(".target").hide().fadeIn(300);

Grüße

Mohd Sakib
quelle
Dies ist die ästhetisch ansprechendste Methode zum Einblenden, da der HTML-Code vollständig komponiert werden kann und die erforderlichen Dimensionen vor dem Einblenden erstellt werden können.
Antonio Nogueras
0

Da das Einblenden ein Übergang von "Ausblenden" zu "Anzeigen" ist, müssen Sie das Element "html" beim Anhängen ausblenden und dann anzeigen.

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);
Erweitern Sie das Snippet

cristisst
quelle