Possible to animate jQuery prepend?

This one liner works great for me, even without the clone()

I'm using it like so:

var elementToPrepend = "<div>Your content</div>";
$(elementToPrepend).hide().prependTo(".prependHere").fadeIn();

Edit: Proper one-liner would be:

$("<div>Your content</div>").hide().prependTo(".prependHere").fadeIn();

Source


You can animate prepend() or append() quite easy. Just pass the whole animated object as a parameter, like so:

$("#container").prepend( $(data).hide().delay(500).show('slow') );

If you like it more readable:

var object = $(data).hide().delay(500).show('slow');
$("#container").prepend(object);

You have to do something like this:

var data = $('.data').html();
var insert = '<div class="data-container">'+ data +'</div>';
$('button').click(function(){
    $('.data-container').remove();
    $('.initial').hide();
    $('.initial').prepend(insert);
    $('.initial').slideToggle();

});

FIDDLE UPDATED