Trying to use Jquery scroll to make an object FadeOut and then FadeIn

Question

So I have this object:

<span>Fadeout on scroll</span>

And this code:

$(window).scroll(function () { 
  $("span").fadeOut("slow");
});
  $("span").fadeIn("slow");

I want the object to fade out when scrolling, and fade back in when complete

My code doesn't work for what I need it to work for.

You can take a look at this article http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ — Khoa Nguyen, May 06 '11 at 03:08

score 0 · Answer 1 · answered May 06 '11 at 03:19

YNhat's link will describe how to do it correctly.

However, in case you want to know why yours doesn't work. If you look at your code, the fadeIn is completely outside of any event. This means that it will run initially when the browser interprets it and never again. The fadeOut will run every time you scroll but fadeIn will not run so it will just stay hidden.

Trying to use Jquery scroll to make an object FadeOut and then FadeIn

1 Answers1