一个循环中的淡入淡出同时淡入淡出

Question

我在页面上创建了无限数量的div，我需要它们逐个显示。也许每秒钟都在消失，滚动到这个div。无论我做什么，所有div都同时显示。我不能管理滚动到在div衰落。谢谢

// Using multiple unit types within one animation. 
 

 

 

 
     $(document).ready(function() { 
 

 
    var divs = $('div[id^="gm"]'); 
 

 
    //alert(divs.length); 
 
    for(var i = 0; i < divs.length; i++){ 
 
    var thisDiv = divs[i]; // element 
 

 
    var $thisDiv = $(divs[i]); // jquery object 
 

 

 
      //animate($thisDiv); 
 
     //show($thisDiv, divs.length * 300); 
 
     //$thisDiv.delay(600) 
 
     setTimeout(
 
     $($thisDiv).slideUp(3000).delay(800).fadeIn(4000), 300); 
 

 
     } 
 

 
    
 
\t \t })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 

 
     <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
      <div class="panel panel-warning"> 
 
       <div class="panel-heading">Fight Stats</div> 
 
      </div> 
 

 
      
 
      <div class="panel panel-info"> 
 
       <div class="panel-heading"><span class="glyphicon glyphicon-flash "></span>ROUND 1</div> 
 
      </div> 
 

 
      <div class="panel-body"> 
 
       <div style="display: none" id="gmround1"> 
 

 
        <div style="display: none" id="gmplayer1round1"> 
 
         Player 1 casts a fireball... <span class="fa fa-magic"></span><br> 
 

 
         
 
         hits Player 2 with <span class="text-danger">40 </span> damage! 
 
         
 
         <em>(with a roll of 73)</em> 
 
         <br> 
 
         
 
        </div> 
 

 
        <div style="display: none" id="gmplayer2round1"> 
 

 

 
         
 
         Player 2 swings his hammer...<span class="fa fa-gavel"></span><br> 
 
         
 
         <strong>MISSES! </strong> 
 
         
 
         <em>(with a roll of 16)</em> 
 
         <br> 
 

 
         
 
         
 
        </div> 
 
       </div> 
 

 
      <div class="panel panel-warning" style="display: none" id="gmstatus1"> 
 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
       <strong><i class="text-primary">Player 1</i></strong> 
 
        <div class="progress"> 
 
         <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="750" aria-valuemin="0" aria-valuemax="750" style="width:100%;"> 
 
         <span>750/750</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right"> 
 
       <strong><i class="text-warning ">Player 2</i></strong> 
 
        <div class="progress"> 
 

 
         <div class="progress-bar progress-bar-warning progress-bar-striped active pull-right" role="progressbar" aria-valuenow="710" aria-valuemin="0" aria-valuemax="750" style="width:94.6666666667%;"> 
 
         <span>710/750</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 

 
      </div> 
 

 

 

 
     
 
      <div class="panel panel-info"> 
 
       <div class="panel-heading"><span class="glyphicon glyphicon-flash "></span>ROUND 2</div> 
 
      </div> 
 

 
      <div class="panel-body"> 
 
       <div style="display: none" id="gmround2"> 
 

 
        <div style="display: none" id="gmplayer1round2"> 
 
         Player 1 casts a fireball... <span class="fa fa-magic"></span><br> 
 

 
         
 
         <strong>MISSES!</strong> 
 
         
 
         <em>(with a roll of 66)</em> 
 
         <br> 
 
         
 
        </div> 
 

 
        <div style="display: none" id="gmplayer2round2"> 
 

 

 
         
 
         Player 2 swings his hammer...<span class="fa fa-gavel"></span><br> 
 
         
 
         <strong>MISSES! </strong> 
 
         
 
         <em>(with a roll of 3)</em> 
 
         <br> 
 

 
         
 
         
 
        </div> 
 
       </div> 
 

 
      <div class="panel panel-warning" style="display: none" id="gmstatus2"> 
 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
       <strong><i class="text-primary">Player 1</i></strong> 
 
        <div class="progress"> 
 
         <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="750" aria-valuemin="0" aria-valuemax="750" style="width:100%;"> 
 
         <span>750/750</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right"> 
 
       <strong><i class="text-warning ">Player 2</i></strong> 
 
        <div class="progress"> 
 

 
         <div class="progress-bar progress-bar-warning progress-bar-striped active pull-right" role="progressbar" aria-valuenow="710" aria-valuemin="0" aria-valuemax="750" style="width:94.6666666667%;"> 
 
         <span>710/750</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 

 
      </div>

Answer 1

组延迟的时候，我多少？

$($thisDiv).slideUp(3000).delay(i * 800).fadeIn(4000), 300);