Jquery - Is it possbile to add animation to AJAX loaded content

Question

I have some content that I am loading to my page using AJAX. When it loads it flashes on screen and looks a bit messy. Is there anyway to add some jquery animations to it???

$("#posts").load("posts.php", {from_user: fm}, function(){});

Answer 1

$.get("posts.php", {from_user: fm}, function(html){
   $(html).hide().appendTo('yourSelector').fadeIn();
});

Or $.post or $.ajax... just not load because you need to hide it and then animate it in.

Answer 2

You could use $.ajax() instead.

$.ajax({
    url: 'posts.php',
    data: {from_user: fm},
    success: function( html ) {
        $(html).hide().appendTo('#posts').fadeIn();
    }
});

Answer 3

You could use a wrapper to load content into. Assume you have <div class="postWrap"></div> inside <div id="posts"></div>.

CSS

.postWrap { display: none; opacity: 0 }

JS

$("#posts .postWrap").load(
  "posts.php",
  {from_user: fm},
  function() {
    $("#post .postWrap").fadeIn(); //for example, you could use any effect
  }
);