Using fadein and append

Question

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.

Ryan

Answer 1

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

Answer 2

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

Answer 3

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://something/",
    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.

Answer 4

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.