CODEWITHSUNDEEP
javascriptjquerycss
lemonginger
lemonginger

Reputation: 345

Fade-in and Fade-out divs while scrolling page

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

Upvotes: 2

Views: 1286

Answers (1)

javiercf
javiercf

Reputation: 811

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

Upvotes: 1

Related Questions