jQuery AJAX using fadeIn + replaceWith

Question

There are several q & a's on SO on this but I found none that address my issue. And I'm stumped with this. Please redirect me to a link if you know of an available answer to this.

My page has an empty DIV #posts_insert in which new posts are inserted via Ajax.

    $.ajax({
        url: 'chat/posts_submit/' + <?php echo $page_id; ?>,
        type: 'POST',
        data: $('#posts_form').serialize(),
        dataType: 'html',
        success: function(html) {
            $('#posts_insert').replaceWith(html);
        }
    });

I want that new post to fade in, replacing #posts_insert. I've tried several iterations on success using hide()prior to fadeIn but I just can't make this work.

Any ideas how to solve this? Thanks in advance.

Answer 1

How about:

$("#posts_insert").replaceWith(function() {
    return $(html).hide().fadeIn();
});

Here's a working example: http://jsfiddle.net/andrewwhitaker/jTLn5/