在鼠标滚动上使用平滑过渡使div可见

Question

我正在我的网站中使用bootstrap，我正在尝试使用jquery一样一个接一个地显示div组，如页面链接http://demo.fifothemes.com/pixma/General/index.html

我曾尝试过这段代码，但这并没有让我像链接那样顺利过渡。这可以通过CSS来完成，或者我做错了。以下是我尝试过的代码。

jquery的

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

HTML

 <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>