Using fadein and append

I am loading JSON data to my page and using appendTo() but I am trying to fade in my results, any ideas?

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

I saw that there is a difference between append and appendTo, on the documents.

I tried this as well:

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

I got it, the above did the trick!

But I get "undefined" as one of my JSON values.

If you hide the content before you append it and chain the fadeIn method to that, you should get the effect that you're looking for.

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

I don't know if I fully understand the issue you're having, but something like this should work:

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

Basically you're wrapping each piece of the content (each "post") in a span, setting that span's display to none so it doesn't show up, and then fading it in.

This should solve your problem I think.

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

If you are doing append instead then you have to use the :last selector instead.

You have to be aware that the code doesn't execute linearly. The animated stuff can't be expected to halt code execution to do the animation and then return.

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