Ajax append result and animate

Question

I'm trying to append ajax data and slideDown Ajax result data (something like twitter load more)

Tried following code

$("#main").append(html).slideDown();

but data appears without any animation.

How can I append and animate html data from PHP side?

Answer 1

I guess that yoou want to slideDown newly created element instead of #main. Thy this.

$(html).css('display','none').appendTo($("#main")).slideDown();

Answer 2

.slideDown() animates elements which are hidden, as they appear. Because I assume that #main is already visible, when you append items to it, they will simply show up.

What you need to do is append your content to a hidden div at the bottom of #main and call .slideDown() on that hidden div.

If you want to do this repeatedly, you would call .unwrap() in your callback so that you can add the hidden element later:

$('#myHiddenDiv').slideDown("slow", function() {
   $(this).children().unwrap();
});

Example: http://jsfiddle.net/6VQwb/1/

Answer 3

You'll want to .hide() the container before appending to it and sliding it down.

The call to .hide() will set the CSS style to display: none; , which will mean appending the content doesn't show anything until it starts to slide down.

So:

$('#main').hide().append(html).slideDown();

As for how to append and animate HTML data from the PHP side, you'll want to follow a similar strategy - use PHP to insert the content into a <div> with a style of display: none; , then use jQuery to slide it down.