0

我正在尝试使用 jquery 插件（此处为 jsfiddle），当我按预期使用它时，它工作得很好，向 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 的情况下）是唯一有效的。任何建议表示赞赏。

谢谢，尼克

4

1 回答 1

0

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

于 2013-08-02T17:32:00.160 回答