Question

我正在尝试使用一个jquery插件（jsfiddle here），当我按预期使用它时它会很好用，为imgs添加一个类。

我想要的是一个页面，其中多个图像在滚动时出现，但是以不同的fadein速度出现，因此一组图像并非全部淡入，而是一种爆裂 - 爆米花 - 效果。

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变量而不是代码上方的变量。

jquery在滚动时以多种速度淡入多个img

1 个答案: