jquery - 从左到右一个接一个淡入

Question

我有使图像从左到右一起淡入的代码，但我希望它们从左到右一个接一个地淡入。我该怎么做？

代码演示在http://jsfiddle.net/02dmq1n4/

$(document).ready(function(){
  $(".fade-right").animate({left:100, opacity:"show"}, 1500);
});

#div1 {
  width: 100px;
  height: 100px;
  float: left;
  margin-top: 5%;
  margin-left: 14%;
  background-color: blue;
}

#div2, #div3 {
  width: 100px;
  height: 100px;
  float: left;
  margin-top: 5%;
  margin-left: 10%;
  background-color: blue;
}

.fade-right {
  width: 100%;
  float: left; 
  position: absolute; 
  display: none; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="fade-right">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

Answer 1

使用下面的代码。检查DEMO

CSS

#div1{
   width: 100px;
   height: 100px;
   float: left;
   margin-top: 5%;
   margin-left: 14%;
   background-color: blue;
   display:none;
 }

 #div2,#div3{
   width: 100px;
   height: 100px;
   float: left;
   margin-top: 5%;
   margin-left: 10%;
   background-color: blue;
   display:none;
 }

 .fade-right{
    width: 100%;
   float:left; 
   position:absolute; 
 }

JQUERY

$(document).ready(function(){
   var delay = 0;
   $('.fade-right div').each(function(){ 
      $(this).delay(delay).animate({
         left:100, opacity:"show"
     },1500);
     delay += 1000;
   });
 });