2

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);
    });
});
lemonginger
  • 345
  • 2
  • 17

1 Answers1

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);
                        }
                    });
                });
            });
javiercf
  • 811
  • 7
  • 16
  • great. a few tweaks and I got that working just like I wanted it! Continuous opacity changes would be even better but hit the client too hard I think. One note, to get things to work consistently I had to change $(this).fadeTo(foo,bar) to $(this).stop().fadeTo(foo,bar) – lemonginger Feb 14 '14 at 01:21