[fade up if < Xpx , fade down if > Xpx]

Duuh!  Thanks, I  was

pulling my hair out...

[fade up if < Xpx , fade down if > Xpx]

This works for my first button but the next ones fade up - but if I scroll back up only the first one disappears; the next remains.

 

 $(window).scroll(function() {

            if ($(this).scrollTop() > 400) {

                TweenLite.to("#dellie", .5, {

                    opacity: 1,

                    display: "block",

                    ease: Back.easeOut

                });

            } else {

                TweenLite.to("#dellie", .5, {

                    opacity: 0,

                    display: "none",

                    ease: Back.easeOut

                });

            }

             });

 

 

        /*#dellie1*/

        $(window).scroll(function() {

            if ($(this).scrollTop() > 800) {

                TweenLite.to("#dellie1", .5, {

                    opacity: 1,

                    display: "block",

                    ease: Back.easeOut

                });

            } else {

                TweenLite.to(".#dellie1", .5, {

                    opacity: 0,

                    display: "none",

                    ease: Back.easeOut

                });

            }

             });

 

I tried naming the functions differently, but that didn't seem to work.

 

 

I've made a codepen at

See the Pen Kvkdf by anon (@anon) on CodePen

- but don't know how to make  the screen  big enough to scroll and thus show the animation...

[Erratic button behaviour]

Indeed I do. Thanks for your patience, and your help.

 

Jai

[Erratic button behaviour]

But the codepen by rhernando (with autoAlpha) solves my issue. I just wanted to understand what  was causing my problem...

[Erratic button behaviour]

Here is the codepen - apologies for not doing it before.

 

See the Pen hFovE by anon (@anon) on CodePen

[Erratic button behaviour]

Thanks for all your help...  there is still something strange. I 'm setting up a codepen...

[Erratic button behaviour]

The code below drives a button that toggles various div s on the page on and off, and changes it own  visible state - from dellie to tellie:

 

It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear.  Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states.

 

$("#dellie").click(function(){

  TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut});

  TweenLite.to("#dellie", 0.0, {opacity:0});

  TweenLite.to(".inacc", 0.5, {opacity:0.4});

  TweenLite.to(".note", 2.5, {display:"block", ease:Back.easeOut});

  });

  

  $("#tellie").click(function(){

  TweenLite.to("#tellie", 0.0, {opacity:0});

  TweenLite.to("#dellie", 0.5, {opacity:1});

 TweenLite.to(".note", 2.0, {display:"none", ease:Back.easeOut});

   TweenLite.to(".inacc", 0.5, {opacity:1});

           

});

 

Thanks