jquery中渐变不透明度的变化

Question

您好我正在尝试从此website重新创建向下滚动指示器（图像底部的3个圆圈）。到目前为止，我有一个基本的JSFiddle。什么是在jQuery中逐渐改变不透明度然后隐藏它并不断重复的最佳方法？

<div class="scrollDown">
            <span></span>
            <span></span>
            <span></span>
        </div>



.scrollDown {
margin:200px auto 0;
width:5px;
padding-bottom:50px;
}

.scrollDown span {
-webkit-border-radius: 10px 10x;
-moz-border-radius: 10px 10px;
border-radius: 10px 10px;
border: 1px solid #fff;
margin-bottom:3px;
height: 5px;
width: 5px;
background: #000;
opacity: 1;
display: block;
}



setTimeout(function(){
        $('#scrollDown span').fadeOut();}, 2000); 

因此，我希望每个跨度在不同的时间逐渐淡出，而不是同时出现。

Answer 1

我相信这会让你更接近解决问题：

$(window).scroll(function(){
  $("span").each(function(index) {
     $(this).delay(400*index).fadeTo("slow",0.5,function(){
     $(this).delay(200*index).fadeTo("slow",1);
     });;
  });
});

<强> Fiddle

无视 您可以使用.scroll()和.fadeTo() 我不确定这是否是您要找的，但这里有一个更新的Fiddle。