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

Question

我在 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%，因此您看不到它们正在加载。因此在新加载的内容开始淡入时会有 "delay" 的排序。

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

Answer 1

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

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

感谢匿名帮手！

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

Fade in newly loaded divs incrementally using ajax and append

ajax

wordpress

jquery

append

fadein