jQuery animate .prepend

Question

Rather than simply dumping the HTML into the page I want it to be animated, how can I change the jQuery below to either animate or slide down as the HTML is inserted?

$('.button').click(function() {

j('.tweets ul').prepend(j('.refreshMe ul').html());

});

Answer 1

You can .hide() the content before doing a .prependTo(), then call .slideDown() on the element, like this:

$('.button').click(function() {
 j('.refreshMe ul > *').clone().hide().prependTo('.tweets ul').slideDown();
});

This does .clone() of the children to move, rather than doing an innerHTML style copy, hides the cloned elements before moving them, then slides them down.