javascript - 在滚动视口(viewport)中时，按顺序对元素进行动画处理

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

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

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

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

任何帮助将不胜感激。

最佳答案

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

$('.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);
});

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

关于javascript - 在滚动视口(viewport)中时，按顺序对元素进行动画处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35321269/