jQuery滚动顶部淡入

Question

我在滚动动画div时遇到问题。这个想法是，当窗口顶部500px时，div会逐渐淡入，但是不是一次动画一个，而是使用“this”来一次动画所有div。尽管使用了“this”。

jQuery：

$(document).ready(function(){
  $(window).scroll(function(){
    $("div").scrollTop(function(){
      $(this).css({"opacity" : "1" , "transform" : "translateY(0px)" , "-webkit-transform" : "translateY(0px)" , "-webkit-transition" : "1s"});
    }, 500);
  });
});

CSS：

div {
  visibility: visible;
  transform: translateY(30px);
  opacity: 0;
  -webkit-transform: translateY(30px);
  height: 500px;
  width: 100%;
  background: red;
}