Utilisation de fadein et ajout

Question

Je suis en train de charger des données JSON sur ma page et en utilisant appendTo() mais j'essaie de fondre dans mes résultats, des idées? J'ai vu qu'il y a une différence entre append et appendTo, sur les documents.

J'ai essayé ainsi:

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

Je l'ai, l'a fait au-dessus de l'affaire!

Mais je suis "non défini" comme l'une de mes valeurs JSON.

Answer 1

Si vous masquez le contenu avant de l'ajouter et que vous l'enchaînez à la méthode fadeIn, vous devriez obtenir l'effet que vous recherchez.

// 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(); 

Answer 2

Vous devez être conscient que le code ne s'exécute pas linéairement. On ne peut pas s'attendre à ce que les animés arrêtent l'exécution de code pour faire l'animation et retournent ensuite.

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

En effet, l'animation utilise un autre délai défini et la magie semblable à faire son travail et settimeout est non-blocage.

C'est pourquoi nous avons des méthodes de rappel sur les animations pour exécuter lorsque l'animation se fait (pour éviter de changer quelque chose qui n'existe pas encore)

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

Answer 3

Je ne sais pas si je comprends bien la question que vous rencontrez, mais quelque chose comme cela devrait fonctionner:

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; 
    }); 

Fondamentalement, vous êtes envelopper chaque morceau de contenu (chaque « post ») dans une période, la mise que l'affichage de la durée sans pareil il ne se présente pas, puis la décoloration dans.

Answer 4

Cette devrait résoudre votre problème, je pense. Si vous faites un ajout à la place, vous devez utiliser le dernier sélecteur à la place.

Answer 5

en supposant que vous avez les éléments suivants dans le css défini:

.new {display:none} 

et le javascript doit être:

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

Answer 6

est d'abord convertir les données reçues à l'objet jQuery. Deuxièmement, cachez-le immédiatement. Troisièmement, ajoutez-le à un noeud cible. Et, après tout cela, nous pouvons clairement utiliser l'animation nécessaire, tout comme fadeIn :)

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

Answer 7

im ont un exprensive, pour cela:

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

Answer 8

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