Question

我有3个DIV，我想要做的就是如果用户滚动底部那些DEM 一个接一个出现，如果他滚动顶部他们就会消失。前两个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，所以实际上您说three淡入，three淡入，之后的事情.next()淡出。与out相同。删除所有$('.fadeClass').waypoint(function(direction){ if(direction == "down") $(this).animate({opacity:1}, 5000); else if(direction == "up") $(this).animate({opacity:0}, 1000); },{offset:500});并查看它是否符合您的要求。

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

{{1}}

Answer 2

尝试this：

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

Answer 3

除.next()的问题外，我还要重写您的代码：

$(window).scroll(function () {

    if ($(window).scrollTop() > 100) {

        $('#test').animate({opacity:1}, 5000);

    } else {

        $('#test').stop(true, false).css({'opacity':0});
    } 
});

我觉得它看起来更容易，也更容易理解。对于HTML，我添加一个包装器（这里称为测试）只是为了减少代码大小。 jsFiddle是here

next（）没有帮助scrollTop（）上的第3个元素

3 个答案: