Jquery - Is it possible 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(){});

user113716 · Accepted Answer · 2010-08-29 00:50:37Z

4

You could use $.ajax() instead.

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

answered Aug 29, 2010 at 0:50

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Z. Zlatev · Accepted Answer · 2010-08-29 10:51:38Z

1

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

answered Aug 29, 2010 at 10:51

Z. Zlatev

4,8101 gold badge35 silver badges39 bronze badges

Comments

prodigitalson · Accepted Answer · 2010-08-29 14:59:21Z

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.

edited Aug 29, 2010 at 14:59

answered Aug 29, 2010 at 0:50

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related