CODEWITHSUNDEEP
javascriptjquery
Mazzy
Mazzy

Reputation: 14189

Animate effect in jquery doesn't work properly

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

Upvotes: 0

Views: 43

Answers (2)

Ergec
Ergec

Reputation: 11824

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/

Upvotes: 3

henser
henser

Reputation: 3327

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

Upvotes: 0

Related Questions