使用 ajax 逐渐淡入新加载的 div 并追加答案

【问题标题】：Fade in newly loaded divs incrementally using ajax and append使用 ajax 逐渐淡入新加载的 div 并追加
【发布时间】：2016-03-05 22:54:34
【问题描述】：

我在 Wordpress 中使用 AJAX 将我的页面加载为无限滚动。我在那里没有问题，一切都很好。在初始页面加载时，我正在运行此脚本以淡入初始块：

$('.item').each(function(i) {
     $(this).css('opacity', 0);
     $(this).delay((i++) * 100).fadeTo(1000, 1); 
})

这是应该的。所以这是两难的。由于我正在使用 AJAX 在滚动上加载更多内容，因此它没有拾取这段代码。所以我使用这段代码在 AJAX 中逐步淡入每个项目。

success: function(html){
    $(html).hide().appendTo('#main-results');

    $('.item').each(function(i) {
        $(this).delay((i++) * 100).fadeTo(500, 1); 
    })
}

发生的情况是，一旦新内容加载，它就会从第一个块开始淡入淡出。由于这些块已经加载并且 100% 不透明度，因此您看不到它们正在加载。所以当新加载的内容开始淡入时会有某种“延迟”。

这不是所需的结果（因此我在这里发布），我希望它只有新加载的内容块逐渐淡入。任何帮助或建议将不胜感激。

【问题讨论】：

标签： jquery ajax wordpress append fadein

【解决方案1】：

我在这里找到了一个简短的答案。我能够弄乱建议的内容并得到我需要的东西。对于那些在同一条船上的人，这里是解决方案：

$(html).hide().appendTo('#main-results').filter('.item').each(function(i) {
    $(this).delay((i++) * 100).fadeTo(500, 1); 
})

感谢匿名帮手！

【讨论】：