En utilisant fadein et append

Question

Je charge des données JSON sur ma page et j'utilise appendTo() mais j'essaie de faire apparaître en fondu mes résultats, des idées ?

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

J'ai vu qu'il y a une différence entre append et appendTo, dans les documents.

J'ai également essayé ceci :

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

J'ai compris, ce qui précède a fonctionné !

Mais j'obtiens "undefined" comme l'une de mes valeurs JSON.

Answer 1

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

// Créez les éléments du DOM
$(content)
// Définit le style des éléments sur "display:none"
    .hide()
// Ajoute les éléments cachés à l'élément "posts"
    .appendTo('#posts')
// Fait apparaître en fondu le nouveau contenu
    .fadeIn();

Answer 2

Je ne sais pas si je comprends pleinement le problème que vous rencontrez, mais quelque chose comme ceci devrait fonctionner:

HTML:

  Quelque chose ici

Javascript:

var counter=0;

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

Fondamentalement, vous enveloppez chaque morceau du contenu (chaque "post") dans un span, en définissant l'affichage de ce span sur none pour qu'il ne s'affiche pas, puis vous le faites apparaître en fondu.

Answer 3

Cela devrait résoudre votre problème je pense.

$('#content').prepend('Bonjour!');
$('#content').children(':first').fadeOut().fadeIn();

Si vous utilisez append à la place, vous devez utiliser le sélecteur :last à la place.

Answer 4

Vous devez être conscient que le code ne s'exécute pas de manière linéaire. Les éléments animés ne peuvent pas interrompre l'exécution du code pour effectuer l'animation et ensuite revenir.

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

`

C'est parce que l'animation utilise settimeout et d'autres astuces similaires pour faire son travail et settimeout est non bloquant.

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

`

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

Answer 5

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