滚动时更改元素的不透明度

Question

I have made it almost work but there is an problem with how fast opacity changes and also problem when i scroll back up.

Jsfiddle http://jsfiddle.net/dp1b51fs/2/

1. I did set it to 5000 >> $(".bgimage").animate({opacity: 0.4}, "5000"); But it seems to be the same speed like when i had it on 500. What am i doing wrong? (have tried writing "5000ms" and "500s" but it's the same)
2. When i scroll down then the element (background image) fades out to 0.4 opacity. But when i scroll back up then opacity just goes to 1 opacity and doesnt fades in or similar.

Answer 1

You need to run .stop() before the animation, or else you're just stopping the scrolling up animation you're trying to do:

$(document).scroll(function () {
    if ($(this).scrollTop() > 500) {
      $(".bgimage").stop().animate({opacity: 0.4}, 500);
    } else {
      $(".bgimage").stop().animate({opacity: 1}, 500);
    }

});

JSFiddle

---

Edit: To clarify what I did you your code:

I removed $(this).scrollTop() > 1 because if $(this).scrollTop() > 500 is true, then the other one is already true as well, so ultimately, there is no need for it.

I wrapped your scrolled up animation in a else statement, because what you were origonally doing was firing whatever the user scrolled (even if they were more than 500), it just looked kinda messy and you were firing two functions at once.

I also removed the return because I saw no used for it in your context.