Question

我整个下午一直在玩这个，都使用了waypoints插件而不是。我试图淡化元素，因为它们进入视野并在它们离开时淡出它们（理想情况下，元素在视口中间的不透明度为1，边缘的不透明度为0，并且淡入淡出在两个方向）

这个代码可以在元素出现在屏幕上时找到它们的淡入淡出，但无论我尝试什么样的排列，我都无法让它们再次淡出

faders = $(".fades").fadeTo(0,0);

$(window).scroll(function(d,h) {
    faders.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(100,2);
    });
});

Answer 1

试试这个，希望有所帮助

            $(document).ready(function(){
                faders = $(".fades").fadeTo(0,0);
                $(window).scroll(function(){
                    faders.each(function(){
                        a = $(this).offset().top + $(this).height();
                        b = $(window).scrollTop() + ($(window).height());
                        c = $(window).scrollTop() + $(this).height();
                        if (c > $(this).offset().top){
                            $(this).fadeTo(0,0.5);
                        }
                        else if (a < b) {
                            $(this).fadeTo(0,1);
                        }
                        else { 
                            $(this).fadeTo(0,0.5);
                        }
                    });
                });
            });

滚动页面时淡入和淡出div

1 个答案: