jquery在多個imgs上以多種速度淡入滾動

Question

我試圖使用jquery插件（jsfiddle here），它在我按照預期使用它的時候很好用，向imgs添加了一個類。

我想要的是一個頁面，其中多個圖像在滾動時顯示，但以稍微不同的淡入淡出速度顯示，以便一組圖像不會同時全部淡入，而是一種爆裂爆米花 - 效應英寸

tiles = $("ul#tiles li").fadeTo(0, 0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(500,1); 
    }); 
}); 
tiles = $("ul#tiles2 li").fadeTo(0, 0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(1000,1); 
    }); 
});tiles = $("ul#tiles3 li").fadeTo(0, 0); 

$(window).scroll(function(d,h) { 
    tiles.each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(1500,1); 
    }); 
}); 

我已經多次使用javascipt的不同類別和相應的淡入倍（實施例的此以上），然後分配那些不同類別的不同的圖像試過，但無論哪個類是最後一個列出（在上面的例子中＃tiles3）是唯一可用的。任何意見讚賞。

感謝， 尼克

Answer 1

你正在改變tiles，但在那之後滾動發生。如果你想讓它定位於每一個卷軸，你需要這樣做（例如）：

$('#tiles,#tiles2,#tiles3').find('li').fadeTo(0, 0); 
$(window).scroll(function(d,h) { 
    $("#tiles li").each(function(i) { 
     a = $(this).offset().top + $(this).height(); 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).fadeTo(500,1); 
    }); 
}); 

或給他們不同的名字。每次滾動發生時，它都使用當前的tiles變量，而不是代碼上方的一個。