Geek asks and answers

JQuery AJAX using fadeIn + replaceWith

There are several q and a on this on SO, but I have not found any that concerns my problem. And I'm at a standstill with that. Redirect me to the link if you know the available answer to this question.

My page is blank DIV #posts_insertin which new entries are inserted through 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 the new message to disappear by replacing #posts_insert. I tried several iterations on success, using hide()before fadeIn, but I just can't do the job.

Any ideas how to solve this? Thanks in advance.

+3
source share
3 answers

What about:

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

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

+9

- ?

$.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();
        });
    }
});
0

:

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

, .

EDIT: Why don't you put the container around (#posts_insert), disappear, replaceWith () and fadeIn in the container?

-1
source

More articles:


All Articles