在保留空间的同时褪色DIV

Question

我的HTML中有三个DIV，其中包含“blockOne”，“blockTwo”和“blockThree”类。

我希望他们开始对用户不可见，并在用户向下滚动页面时淡入。目前，我已经将它们设置为具有0的不透明度（在CSS中）：

.blockOne {
opacity: 0; 
}

.blockTwo {
opacity: 0; 
}

.blockThree {
opacity: 0; 
}

然后我有一个以下脚本： -

    $(document).scroll(function(){
var docScroll = $(document).scrollTop(),
    threeBoxesOffset = $(".content").offset().top - 25;

if (docScroll >= threeBoxesOffset) {

    $(".blockOne").fadeTo(1000, 1)
    $(".blockTwo").fadeTo(1500, 1)
    $(".blockThree").fadeTo(2000, 1)

} else {

    $(".blockOne").fadeTo(500, 0)
    $(".blockTwo").fadeTo(1000, 0)
    $(".blockThree").fadeTo(1500, 0)

}
});

结果是DIV在开始时对用户是不可见的，这是正确的，但是当用户向下滚动到它们开始变得可见的点时，它们不会立即开始淡入而是需要一些时间在这之前。

我猜动画会以某种方式排队，因为用户向下滚动，我不知道如何解决这个问题。

Answer 1

由于threeBoxesOffset，

$(".content").offset().top - 25始终包含负值。因此，在您的脚本中，条件if (docScroll >= threeBoxesOffset)始终为true，并在滚动时立即显示内容。我现在已经为它：

Check this fiddle（已更新）/观看Fullscreen

<强> JQuery的

$(document).ready(function() {
    var threeBoxesOffset = $(".content").offset().top - 40;
    $(window).scroll(function(event){
        var docScroll = $(document).scrollTop();
        var check=docScroll+threeBoxesOffset;           
        $('#fxd').html('check : '+check);
        if (check>0) {
            $(".blockOne").stop().animate({'opacity':'1'},500);
            $(".blockTwo").stop().animate({'opacity':'1'},1500);
            $(".blockThree").stop().animate({'opacity':'1'},2000);
        } else {
            $(".blockOne").stop().animate({'opacity':'0'},500);
            $(".blockTwo").stop().animate({'opacity':'0'},1000);
            $(".blockThree").stop().animate({'opacity':'0'},1500);
        }
    });
});

Answer 2

试试这个：

if ( docScroll >= threeBoxesOffset ) {
    $('.blockOne').fadeIn(1000, function() {
        $('.blockTwo').fadeIn(500, function() {
            $('.blockThree').fadeIn(500);
        });
    });
} else {
    $('.blockOne').fadeOut(500, function() {
        $('.blockTwo').fadeOut(500, function() {
            $('.blockThree').fadeOut(500);
        });
    });
}

PS - 在你的代码末尾你有一个无与伦比的闭合器：

}
})    // <-- not matched with anything above
});