1

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

这是我尝试过的：

$(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);
    }
});

这是示例。

有什么更正或建议吗？

4

3 回答 3

1

next()正在选择下一个而不是您想要的那个div，因此实际上您是在说one淡入，three淡入以及three淡入之后的内容。与 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});
于 2013-03-22T07:56:51.583 回答
1

试试这个：

$(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);
    }
});
于 2013-03-22T08:16:11.447 回答
1

除了问题之外.next()，我会像这样重写您的代码：

$(window).scroll(function () {

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

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

    } else {

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

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

于 2013-03-22T08:24:32.537 回答