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/

Answer 2

Something like this?

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

Answer 3

you could try:

success: function(html) {
   var $container = $('#posts_insert').parent();
   $container.fadeOut('fast', function() {
      $('#posts_insert').replaceWith(html);
      $container.fadeIn();
   });
}

might give you the effect you're looking for.

EDIT: Why don't you put a container around the (#posts_insert), fade that out, replaceWith(), and fadeIn the container?