jquery - next() 不帮助scrollTop() 上的第三个元素

Question

我有 3 个 DIV，我想做的是，如果用户滚动到底部，这些 DIV 会一个接一个出现，如果他滚动到顶部，它们就会消失。前 2 个 DIV 工作正常，但第 3 个 DIV 则不行。

这是我尝试过的:

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
        $("#one").fadeIn(5000);
        $('#two').next().fadeIn(5000);
        $('#three').next().fadeIn(5000); 
    }
});
$(window).scroll(function () {
    if ($(window).scrollTop() < 100) {
        $("#one").fadeOut(10);
        $('#two').next().fadeOut(10);
        $('#three').next().fadeOut(10);
    }
});

和Here是样本。

有什么更正或建议吗？

Answer 1

next() 正在选择下一个 div 而不是您想要的，因此实际上您是在说 one 淡入，三淡入，三之后的东西淡入。与out相同。删除所有 .next() 并查看它是否符合您的要求。

编辑: 您说您希望它们在滚动到它们时出现，您可以尝试使用 jQuery Waypoints 。一个例子是 http://jsfiddle.net/EqYsy/28/

$('.fadeClass').waypoint(function(direction){
  if(direction == "down")
    $(this).animate({opacity:1}, 5000);
  else if(direction == "up")
    $(this).animate({opacity:0}, 1000);
},{offset:500});