在滾動視口中時，依次對元素進行動畫處理

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);
});

僅當元素的頂部在視口內或它的底部在視口內時才執行。