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

Even if it would work, you should provide essential part of code here. — Regent, Sep 22 '14 at 12:16
it works. it show you the example. At the top right you can see an edit in jsbin — Mazzy, Sep 22 '14 at 12:16
What do you mean doesn't work properly? It fades out and in http://jsfiddle.net/brxc9nrx/ — Anton, Sep 22 '14 at 12:17
@Anton the example you have provided it is slightly different from mine — Mazzy, Sep 22 '14 at 12:20
@Mazzy Not really, i've just added a div so i could test the scroll. — Anton, Sep 22 '14 at 12:20
when the jquery script is placed at the bottom of the page, the script should be wrapped in document.ready or something like $(function(){... — Mazzy, Sep 22 '14 at 12:21

Ergec · Accepted Answer · 2014-09-22T12:28:58.290

3

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/

edited Sep 22 '14 at 12:28

answered Sep 22 '14 at 12:21

Ergec

11,608
7
52
62

Just one more question. the script is at the bottom of the page. I shouldn't use document.ready. should I wrap it? – Mazzy Sep 22 '14 at 12:28
`document` triggers when all elements, css, js files e.t.c is loaded except images. `window` triggers after all files AND images loaded. If you need images to be loaded too, use window, otherwise document. Window may trigger late depend on visitors connection speed since it waits to load all images (could be some MBs). – Ergec Sep 22 '14 at 12:32
I'm a little bit confused about where to place into the function.the script is placed at the bottom of the page. the page is full of images and the images is fixed and should appear when the user scroll down. if you were me, where would you wrap to the function? – Mazzy Sep 22 '14 at 12:46
@Mazzy always put css at the top, javascript at the bottom. For what to use it depends on your needs. Check this link for better explanation http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – Ergec Sep 22 '14 at 13:26

henser · Answer 2 · 2014-09-22T12:27:52.037

0

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

edited Sep 22 '14 at 12:27

answered Sep 22 '14 at 12:22

henser

3,307
2
36
47

Animate effect in jquery doesn't work properly

2 Answers2