jQuery AJAX 使用淡入 + 替换

Question

关于这个问题有几个问答，但我发现没有一个可以解决我的问题。我对此感到困惑。如果您知道此问题的可用答案，请将我重定向到一个链接。

我的页面有一个空的DIV #posts_insert，其中通过 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);
        }
    });

我希望新帖子淡出，替换 #posts_insert。我在success 上使用hide()fadeIn 之前尝试了几次迭代，但我就是无法完成这项工作。

任何想法如何解决这个问题？提前致谢。

Answer 1

你可以试试：

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

可能会给你想要的效果。

编辑： 为什么不在 (#posts_insert) 周围放置一个容器，将其淡出，replaceWith()，然后淡入容器？

Answer 2

这样的？

$.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

怎么样：

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

这是一个工作示例：http://jsfiddle.net/andrewwhitaker/jTLn5/