Question

我有一个包含多行div的容器我想要从左到右按顺序设置动画，每个项目之间的时间偏移很短，但只有当行在滚动视口中时才行。我不想将它们分组成html中的行，因为项目需要每行4个项目，每行3个项目等等...根据屏幕大小。

我基本上想要执行以下代码，但仅限于视口中的行，当向下滚动页面时，为视口中的下一行设置动画...

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

要看到我想要实现的效果，请在首次工作室工作页面上获取战利品 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);
});

仅当元素top位于视口内部或底部为。

时才会执行此操作

在滚动

1 个答案: