jQuery AJAX 使用 fadeIn +替换为

发布于 2024-11-14 23:47:56 字数 605 浏览 2 评论 0原文

有几个问题& a's on this，但我发现没有一个能解决我的问题。我对此感到困惑。如果您知道对此问题的可用答案，请将我重定向到链接。

我的页面有一个空的 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。在fadeIn之前，我已经使用hide()尝试了几次成功迭代，但我就是无法完成这项工作。

有什么想法如何解决这个问题吗？提前致谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逐鹿 2024-11-21 23:47:56

怎么样：

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

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

How about:

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

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

回复收藏 0 原文

与往事干杯 2024-11-21 23:47:56

像这样的东西吗？

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

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

回复收藏 0 原文

往日情怀 2024-11-21 23:47:56

你可以尝试：

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

可能会给你你正在寻找的效果。

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

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?

回复收藏 0 原文

~没有更多了~