jquery - 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

怎么样：

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

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

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

你可以试试：

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

可能会给您想要的效果。

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