在滚动视口中时，依次对元素进行动画处理

Question

我有一个包含多行div的容器，我想从左到右依次进行动画处理，每个项目之间的时间间隔较短，但仅当该行位于滚动视口中时才可以。 我不想将它们分组为html中的行，因为这些项目需要是每行4个项目，每行3个项目等等...基于屏幕大小。

我基本上想做下面的代码，但只在视口中的行上，当向下滚动页面时，为视口中的下一行设置动画...

$('.gallery-item').each(function(i){
    $(this).delay((i++) * 200).fadeTo(400, 1);
});

要查看我想要达到的效果，请在firstborn工作室工作页面http://www.firstborn.com/work/featured上抢劫一下

任何帮助将不胜感激。

Answer 1

为什么不简单地添加一条线来检查元素是否在视口之外呢？ 我们可以假设视口中的所有元素都在视口之外的元素之前（希望如此），因此您可以执行以下操作：

$('.gallery-item').each(function(i){
    if($(this).offset().top > window.innerHeight) 
        return false;
    $(this).delay((i++) * 200).fadeTo(400, 1);
});

一旦元素在视口之外，我们就简单地取消循环。 您甚至可以仔细检查，以便对视口内的所有元素进行检查，而不管其在流中的位置如何：

$('.gallery-item').each(function(i){
    if( 
        $(this).offset().top < window.scrollTop + window.innerHeight
        && $(this).offset().top + $(this).height() > window.scrollTop
    ) $(this).delay((i++) * 200).fadeTo(400, 1);
});

仅当元素的顶部在视口内或它的底部在视口内时才执行。