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".

— TIMEX
quelle

mögliches Duplikat von Using Fadein und Append

— Benutzer

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