CODEWITHSUNDEEP
jqueryajaxanimation
user342391
user342391

Reputation: 7827

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

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

Upvotes: 2

Views: 7414

Answers (3)

prodigitalson
prodigitalson

Reputation: 60413

$.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.

Upvotes: 1

Z. Zlatev
Z. Zlatev

Reputation: 4820

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

Upvotes: 1

user113716
user113716

Reputation: 322492

You could use $.ajax() instead.

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

Upvotes: 4

Related Questions