Animate effect in jquery doesn't work properly

Question

I'm trying to create a simple fading effect with jquery. Here is the link which show the example. The problem is it seems it doesn't work properly. Why?

http://jsbin.com/zijihugejowi/2/edit?html,css,js,output

Answer 1

It's because animate chains too much when you scroll. Use code below for both lines

navbarBrandImg.stop().animate(/* your code */)

Also check this article about how bad is to use .scroll() directly

http://ejohn.org/blog/learning-from-twitter/

Answer 2

For that purpose, use fadeIn, fadeOut jQuery effects instead.

See working example here: JSBIN

Edit the following in your code:

CSS:

img {
  display: none;
  position: fixed;
}

JS

if ($currWindow.scrollTop() > 100) {

    navbarBrandImg.fadeIn(500);

  } else {

    navbarBrandImg.fadeOut(500);
  }