Mit Fadein und Anhängen

74

Ich lade JSON-Daten auf meine Seite und verwende, appendTo()aber ich versuche, meine Ergebnisse einzublenden. Irgendwelche Ideen?

$("#posts").fadeIn();
$(content).appendTo("#posts");

Ich habe gesehen, dass es einen Unterschied zwischen appendund appendToin den Dokumenten gibt.

Ich habe es auch versucht:

$("#posts").append(content).fadeIn();

Ich habe es verstanden, das oben Genannte hat es geschafft!

Aber ich bekomme "undefined"als einen meiner JSON-Werte.

javascript jquery fade

— Coughlin
quelle

169

Wenn Sie den Inhalt ausblenden, bevor Sie ihn anhängen, und die FadeIn-Methode damit verketten, sollten Sie den gewünschten Effekt erzielen.

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
    .hide()
// Appends the hidden elements to the "posts" element
    .appendTo('#posts')
// Fades the new content into view
    .fadeIn();

— Kevin Gorski
quelle

Ich versuche $ (elem) .slideUp (). AppendTo (div) .slideDown (); aber es macht es nicht in der Reihenfolge in FF5. Ich verwende den Rückruf von slideUp, um ihn in der richtigen Reihenfolge anzuhängen und zu verschieben, aber dann hat anhängen keinen Rückruf, sodass das Element bereits sichtbar erscheint. Die Antwort von Kent Fredric behebt dieses Problem, daher bin ich nur besorgt darüber, dass der Anhang vor dem Herunterrutschen ausgeführt wird.

— TuteC

1

In Kents Antwort werden Animationsmethoden wie slideUp und slideDown mit Rückrufen behandelt, aber das OP benötigte nur am Ende der Methodenkette wirklich eine Animation. Benötigen Sie weitere Hilfe?

— Kevin Gorski

7

Ich weiß nicht, ob ich das Problem, das Sie haben, vollständig verstehe, aber so etwas sollte funktionieren:

HTML:

<div id="posts">
  <span id="post1">Something here</span>
</div>

Javascript:

var counter=0;

$.get("http://www.something/dir",
    function(data){
        $('#posts').append('<span style="display:none" id="post' + counter + ">" + data + "</span>" ) ;
        $('#post' + counter).fadeIn();
        counter += 1;
    });

Grundsätzlich wickeln Sie jeden Teil des Inhalts (jeden "Beitrag") in eine Spanne ein, setzen die Anzeige dieser Spanne auf keine, damit sie nicht angezeigt wird, und blenden sie dann ein.

— Parand
quelle

Hervorragendes Beispiel dafür, wie man einfache Dinge auf sehr komplizierte Weise macht. Sorry Mann;)

— Sliq

4

Dies sollte Ihr Problem lösen, denke ich.

$('#content').prepend('<p>Hello!</p>');
$('#content').children(':first').fadeOut().fadeIn();

Wenn Sie stattdessen anhängen, müssen Sie stattdessen den Selektor: last verwenden.

— Firas
quelle

3

Sie müssen sich bewusst sein, dass der Code nicht linear ausgeführt wird. Es ist nicht zu erwarten, dass das animierte Material die Codeausführung anhält, um die Animation auszuführen und dann zurückzukehren.


   commmand(); 
   animation(); 
   command();



This is because the animation uses set timeout and other similar magic to do its job and settimeout is non-blocking.

This is why we have callback methods on animations to run when the animation is done ( to avoid changing something which doesn't exist yet )

   command(); 
   animation( ... function(){ 
      command(); 
   });

— Kent Fredric
quelle

3

$(output_string.html).fadeIn().appendTo("#list");

— Ball_cs
quelle

2

Angenommen, Sie haben Folgendes in der CSS definiert:

.new {display:none}

und das Javascript sollte sein:

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();

— Michael Martin
quelle

1

Zunächst werden empfangene Daten in jQuery Object konvertiert. Zweitens verstecken Sie es sofort. Drittens hängen Sie es an einen Zielknoten an. Und schließlich können wir die notwendigen Animationen eindeutig verwenden, genau wie FadeIn :)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();

— Sam
quelle

0

Ich habe eine teure, dafür:

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);

— slboat
quelle

Was ist "teuer"?

— Pang

0

Ich habe versucht, was Sie gesagt haben, hat den Trick getan, funktioniert aber nicht. es funktionierte mit dem folgenden Code

$("div").append("content-to-add").hide().fadeIn();

— Emanuel Silva
quelle