Php 使div在鼠标滚动时平滑过渡可见

我在我的站点中使用引导程序，我试图使用jquery使div组一个接一个地可见，就像在页面链接中一样

我曾经尝试过这段代码，但这并没有给我像链接中那样的平滑过渡。这可以通过css实现，或者我做错了。下面是我尝试过的代码

jquery HTML

---

关于为什么你不喜欢你的幻灯片向下的更多信息？这不是平滑的，实际上我想要放大效果，但我找不到放大效果。你应该探索内置于过渡中的引导。有什么好的消息来源我可以参考这次转变。我不能，我能从中得到很多。

 var yPos; 
    function yScroll(){      
        yPos = window.pageYOffset;
        if(yPos > posi){ 

           setTimeout(function(){
            $("#r1").slideDown(1000,"easeOutSine");        
          }, 1);
           setTimeout(function(){
            $("#r2").show();        
          }, 1100);
           setTimeout(function(){
            $("#r3").show();        
          }, 1100);
           setTimeout(function(){
            $("#r4").show(1000,"easeOutSine");        
          }, 1);
        } 
    }
    window.addEventListener("scroll", yScroll);

 <div class="container">
<h1 style="text-align:center;padding-bottom: 5%;color:#FFF;">Services of remittance      </h1>
 <div class="row">
 <div class="col-xs-6 col-md-3">
 <a href="javascript:void(0);" class="thumbnail" id="r1"  style="display:none;">
     <img src="<?php echo base_url().'content/uploads/image/money-gram.png' ?>" alt="..." class="remit">
 </a>
 </div>

 <div class="col-xs-6 col-md-3">
    <a href="javascript:void(0);" class="thumbnail" id="r2" style="display:none;">
    <img src="<?php echo base_url().'content/uploads/image/prabhu.jpg' ?>" alt="..." class="remit">
  </a>
 </div>

       <div class="col-xs-6 col-md-3">
           <a href="javascript:void(0);" class="thumbnail" id="r3" style="display:none;">
    <img src="<?php echo base_url().'content/uploads/image/samsara.jpg' ?>" alt="..." class="remit">
   </a>
  </div>

     <div class="col-xs-6 col-md-3">
         <a href="javascript:void(0);" class="thumbnail" id="r4" style="display:none;">
    <img src="<?php echo base_url().'content/uploads/image/western-union.jpg' ?>" alt="..." class="remit">
   </a>
   </div>

  </div>
  </div>