web-dev-qa-db-fra.com

Utilisation de fadein et append

Je charge des données JSON sur ma page et utilise appendTo (), mais j'essaie de fondre 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, sur les documents.

J'ai aussi essayé ça:

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

je l'ai eu, ce qui précède a fait le tour!

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

javascriptjqueryfade
74
Coughlin

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

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

Je ne sais pas si je comprends parfaitement le problème que vous rencontrez, mais quelque chose comme ceci 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 encapsulez chaque partie du contenu (chaque "publication") dans une étendue, définissez l'affichage de cette étendue sur aucun afin qu'il n'apparaisse pas, puis fondez-le.

7
Parand

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

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

Si vous faites ajouter à la place, vous devez utiliser le sélecteur: last à la place.

4
Firas

Vous devez savoir que le code ne s'exécute pas linéairement. On ne peut pas s’attendre à ce que les éléments animés interrompent l’exécution de code pour effectuer l’animation, puis y revenir. 


   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(); 
   });
3
Kent Fredric
$(output_string.html).fadeIn().appendTo("#list");
3
Ball_cs

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

.new {display:none}

et le javascript devrait être:

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

Tout d’abord, convertissez les données reçues en objet jQuery . Deuxièmement, masquez-les immédiatement . Troisièmement, ajoutez-les à un nœud cible . )

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

J'ai essayé ce que vous avez dit, mais ça ne marche pas ..__ça a marché avec le code suivant 

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

j'ai une expérience, pour cela:

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