Fügen Sie ein Element mit Einblendeffekt hinzu [jQuery]

Lesezeit: 2 Minuten

Benutzer-Avatar
ZEITX

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 “blah” div eingeblendet wird, nicht der gesamte “mycontent”.

  • mögliches Duplikat von Using fadein and append

    – Benutzer

    22. März 2014 um 17:20 Uhr

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

  • Ich möchte, dass nur das neue “blah” div eingeblendet wird.

    – ZEITX

    14. Januar 2011 um 3:03 Uhr

  • @TIMEX: Das sollte das tun.

    – icktoofay

    14. Januar 2011 um 3:03 Uhr

  • 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 ähnlich) oder macht es keinen Unterschied?

    – qwertymk

    14. Januar 2011 um 3:12 Uhr


  • @qwertymk: Es gibt keinen wirklichen Grund. Wenn Browser jemals gerendert würden, während das DOM noch manipuliert wurde (was meines Wissens derzeit kein Browser tut), würde der Inhalt nicht aufblitzen, bevor er eingeblendet wird. Wiederum nicht wirklich wichtig.

    – icktoofay

    14. Januar 2011 um 3:15 Uhr

  • @ArthurTarasov: Das hängt an #blah für sich selbst, was nicht wie etwas aussieht, das Sie tun möchten (und ich vermute, es wird als No-Op interpretiert). Du kannst die auch einfach fallen lassen .appendTo Teil und verwenden $('#mycontent').hide().fadeIn(1000).

    – icktoofay

    13. Dezember 2017 um 8:48 Uhr

Ein paar mehr Infos hinzufügen:

jQuery implementiert “Methodenverkettung”, was bedeutet, dass Sie Methodenaufrufe für dasselbe Element verketten können. Im ersten Fall:

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

Sie würden die anwenden fadeIn Aufruf des Objekts, das in diesem Fall Ziel der Methodenkette ist #mycontent. Nicht was du willst.

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

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

Das bedeutet im Grunde, erstellen Sie die htmlstandardmäßig als ausgeblendet festlegen, anhängen #mycontent und dann einblenden. Das Ziel der Methodenkette ist nun hmtl Anstatt von #mycontent.

Das funktioniert auch

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

Grüße

  • Dies ist die ästhetisch ansprechendste Art, das Einblenden zu handhaben, da es ermöglicht, dass der HTML-Code vollständig zusammengesetzt ist und die erforderlichen Abmessungen vor dem Einblenden erstellt.

    – Antonio Nogueras

    30. August 2019 um 18:23 Uhr

Da das FadeIn ein Übergang vom Verbergen zum Anzeigen ist, müssen Sie das “html”-Element ausblenden, wenn Sie es anhängen, und es dann anzeigen.

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

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

$('#blah').fadeIn(999);
1245630cookie-checkFügen Sie ein Element mit Einblendeffekt hinzu [jQuery]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy