Question

如何为单击“加载更多”按钮时添加的新帖子添加淡入效果？现在它在新帖子中淡出旧帖子而不是不接触旧帖子而只是淡化新帖子

  $(document).ready(function(){
        $(".load_more").click(function (){
            $('.load_more').html('<img src="images/ajax-loader.gif" />');
            $.ajax({
                url: "loadmore.php?id=" + $(".ad_display:last").attr("id"),
                success: function(html){
                    if(html){
                        $(".main_page").hide().append(html).fadeIn("slow");
                        $('.load_more').html('Load More');
                    }else{
                        $('.load_more').replaceWith('There are no more posts.');
                    }
                }
            });
        });
    });

任何帮助表示赞赏！

Answer 1

$(document).ready(function(){
    $(".load_more").click(function (){
        $('.load_more').html('<img src="images/ajax-loader.gif" />');
        $.ajax({
            url: "loadmore.php?id=" + $(".ad_display:last").attr("id"),
            success: function(html){
                newPost = $(html);
                if(newPost.length){
                    newPost.hide().appendTo(".main_page").fadeIn("slow");
                    $('.load_more').html('Load More');
                }else{
                    $('.load_more').replaceWith('There are no more posts.');
                }
            }
        });
    });
});

将“html”视为jquery对象（DOM），然后将其设置为动画。

编辑：

抱歉，我的英语很差。

你想为新帖添加淡入效果。

将它变成jQuery对象。

html - ＆gt; $（“＆lt; tag＆gt; .......＆lt; / tag＆gt;”）（字符串到对象（DOM））

让它附加到上下文并执行效果

并非所有帖子＆gt;＆gt; $（ 'main_page'）

您：

$(".main_page").hide().append(html).fadeIn("slow");
     ↑                                 |
     ╰----------------------------- --╯

$(<div class="main_page">
    Post
    Post
    Post
    "html"     <--- HTML appended here
</div>).fadeIn();

新：

success: function(html){
    newPost = $(html); ←╮
    if(newPost.length){ /
        newPost -------╯.hide().appendTo(".main_page").fadeIn("slow");
            ↑                                               |
            ╰----------------------------------------------╯
    }else{
        $('.load_more').replaceWith('There are no more posts.');
    }
}

<div class="main_page">
    Post
    Post
    Post
    $("html").fadeIn();     <--- HTML appended here
</div>

$（a）中.append（B）; //返回

Ajax fadein效果仅适用于新帖子

1 个答案: