滚动页面时淡入和淡出div

Question

I've been playing with this all afternoon, both using the waypoints plugin and not. I'm trying to fade in elements as they come into view and fade them out when they come out of view (ideally the element would have an opacity of 1 in the middle of the viewport, an opacity of 0 at the edges, and fade in both directions)

This code works find for fading in elements as they come onto the screen, but I can't get them to fade back out again no matter what permutations I try

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

try this, hope it helps

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