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

时间:2015-12-01 21:10:15

标签: jquery ajax wordpress append fadein

我在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%不透明,因此您看不到它们已加载。因此,当新加载的内容开始淡入时,存在“延迟”排序。

这不是需要的结果(因此我在这里发布的原因),我想拥有它,所以只有新加载的内容块逐渐淡入。任何帮助或建议将不胜感激。

1 个答案:

答案 0 :(得分:0)

我在这里简单地回答了一下。我能够搞砸了所建议的东西并得到了我需要的东西。对于那些在同一条船上的人,这是解决方案:

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

感谢匿名助手!